CSS Gradient Generator
What is CSS Gradient Generator
A CSS gradient generator lets you build a linear or radial gradient visually and copy the exact CSS. Pick a gradient type, set the angle (linear) or the shape and position (radial), add as many color stops as you need, and drag each one to the right spot. The preview updates instantly, and the output box always shows a ready-to-paste background declaration.
How to use
- Choose Linear or Radial as the gradient type.
- Adjust the angle slider for linear gradients, or pick a shape and position for radial ones.
- Set each color stop's color and position, and add more stops with the Add color stop button.
- Copy the generated CSS from the output box and paste it into your stylesheet.
When to use it
Building a hero section and need a smooth blue-to-pink backdrop? Set two stops at 0% and 100%, pick an angle, and copy background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); straight into your CSS. Just as handy for card overlays, button hover states, or a radial glow behind a logo, without hand-tuning gradient syntax in devtools.
Frequently asked questions
What is the difference between a linear and a radial gradient?
A linear gradient transitions colors along a straight line at a fixed angle, like a sunset fading from orange to purple. A radial gradient transitions colors outward from a center point in a circle or ellipse, like a spotlight or a glow effect.
How many color stops can I add?
As many as you like. Every gradient needs at least two stops to render, and you can add more with the Add color stop button to create multi-color transitions like rainbows or brand palettes.
What do the position percentages on each stop mean?
The position is where that color reaches full strength along the gradient, from 0% (the start) to 100% (the end). Moving a stop's position shifts where its color dominates and how it blends with its neighbors.
Does the generated CSS work in all browsers?
Yes. linear-gradient() and radial-gradient() are standard CSS functions supported by every modern browser, no vendor prefixes needed.
Can I share this tool with my gradient pre-filled?
Yes. The URL updates automatically as you build your gradient. Copy it from the address bar or use the Share button, and anyone who opens the link sees the exact same gradient.
Related tools
Aspect Ratio Calculator
Calculate aspect ratios, find a missing width or height, and resize images or video while keeping the same proportions. Free and instant.
Barcode Generator
Generate EAN-13 or Code 128 barcodes online. Enter your number or text, download as SVG or PNG. Free, no signup needed.
Base64 Decoder
Decode Base64 strings to plain text instantly in your browser. Supports full Unicode output including emojis. Free online Base64 decoder.