quialo.

CSS Gradient Generator

Direction
Color stops
0%
100%
Presets

CSS

background: linear-gradient(45deg, #ff7e5f 0%, #feb47b 100%);

Build a CSS gradient and watch it update live. Pick linear, radial, or conic, set the angle or position, add as many color stops as you need, then copy a ready to paste background rule. Everything runs in your browser, so nothing is uploaded.

How to use

  1. Pick a gradient type: linear, radial, or conic.
  2. Set the angle or position, then add or adjust color stops.
  3. Drag a stop's position slider or pick a new color to fine tune the blend.
  4. Try a preset, the random button, or reverse the stops to explore options.
  5. Click Copy CSS to grab the background rule for your stylesheet.

Examples

  • A two stop linear gradient at 90 degrees: background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
  • A radial spotlight: background: radial-gradient(circle at center, #ffffff 0%, #1f2937 100%);
  • A conic color wheel: background: conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 33%, #0000ff 66%, #ff0000 100%);

FAQs

Which gradient types are supported?
Linear, radial, and conic. Linear and conic use an angle, radial uses a shape (circle or ellipse), and radial and conic let you set the center position.
How many color stops can I add?
As many as you like, with a minimum of two. Each stop has its own color and a position from 0 to 100 percent, so you can build simple two color blends or detailed multi stop gradients.
Does the output need vendor prefixes?
No. Current browsers support unprefixed linear, radial, and conic gradients, so the tool outputs a single clean background rule. Old prefixed syntax used a different angle convention, so adding it could change the look.
What does the reverse stops button do?
It flips the gradient direction by mirroring each stop's position (a stop at 20 percent moves to 80 percent) and reversing the color order, so the blend runs the other way.
Is my work sent anywhere?
No. The preview and the CSS are generated locally in your browser. Nothing is uploaded or stored.

Related tools