ToolBlur

CSS Gradient Generator

Build beautiful CSS gradients and copy the code.

#4f46e5
#db2777
background: linear-gradient(120deg, #4f46e5, #db2777);

Über dieses Tool

The CSS Gradient Generator lets you design smooth linear gradients by picking two colors and an angle, with a live preview and ready-to-copy CSS. Gradients add depth and personality to buttons, hero sections and backgrounds. Copy the generated background property straight into your stylesheet.

So funktioniert es

  1. 1Pick a start and end color.
  2. 2Adjust the angle.
  3. 3Copy the CSS background code.

Vorteile

  • Live gradient preview.
  • Adjustable angle and colors.
  • Copy-ready CSS output.

Detailed guides for this tool

Learn the underlying concepts, worked examples and common mistakes before relying on the result.

How to Compress Images to Speed Up Your WebsiteColor Formats Explained: HEX vs RGB vs HSL

Häufig gestellte Fragen

Can I use this on any website?+

Yes. The output is standard CSS that works in every modern browser.

How do I change direction?+

Adjust the angle slider — 90deg goes left to right, 180deg goes top to bottom.

Tool teilen:X / TwitterFacebook