CSS Gradient Generator
Build CSS gradients visually — pick a type, choose colors, adjust the angle, and copy clean CSS.
- Free
- No account
- Runs in your browser
- Nothing uploaded
background-color: #ff9a9e; background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);
Runs entirely in your browser — your input is never uploaded, logged, or stored.Privacy policy
What is CSS Gradient Generator?
CSS gradients create smooth color transitions directly in your stylesheet — no image files needed. They render at any resolution, add zero network weight, and can be animated. Three gradient types cover every use case:
• Linear gradients flow along a line you define with an angle. Use them for backgrounds, buttons, hero sections, and any surface that benefits from a directional color shift. • Radial gradients spread outward from a center point in a circle or ellipse. Great for spotlights, vignettes, and focal-point effects. • Conic gradients sweep around a center like a color wheel. Ideal for pie charts, loading spinners, and angular color effects.
Each gradient is defined by color stops — pairs of a color and a position (0-100%). The browser interpolates between them. Two stops create a simple blend; adding more stops gives you precise control over where transitions happen.
The generated CSS includes a solid background-color fallback for older browsers. Paste both declarations into any CSS selector and the gradient renders in all modern browsers without prefixes.
CSS gradient syntax per CSS Images Module Level 3 and Level 4:
• linear-gradient([<angle> | to <side>], <color-stops>) — Angle in degrees: 0deg = up, 90deg = right, 180deg = down, 270deg = left. — Or use 'to right', 'to top left', etc.
• radial-gradient([circle | ellipse], <color-stops>) — Spreads from center outward. Shape defaults to ellipse.
• conic-gradient(from <angle>, <color-stops>) — Rotates around center. Starts at the top (12 o'clock) by default.
Color stops: each is a color followed by an optional position (0-100%). Without explicit positions, stops are evenly spaced. The browser interpolates colors between stops in sRGB by default.
This tool generates clean, prefix-free CSS. All three gradient types are supported in every evergreen browser (Chrome, Firefox, Safari, Edge) since 2020.
Worked examples
- linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%)
- radial-gradient(circle, #a18cd1 0%, #fbc2eb 100%)
- conic-gradient(from 0deg, #ff0000 0%, #00ff00 33%, #0000ff 66%, #ff0000 100%)
- linear-gradient(to right, #000000 0%, #ffffff 50%, #000000 100%)
- linear-gradient(135deg, #667eea 0%, #764ba2 100%)
How to use CSS Gradient Generator
- Choose a gradient type: Linear, Radial, or Conic.
- Set the angle using the slider (linear and conic only).
- Pick colors for each stop using the color pickers.
- Adjust stop positions to control where transitions happen.
- Add or remove color stops as needed (2-8 stops).
- Copy the generated CSS and paste it into your stylesheet.
Common errors
- Gradient looks different in the browser than in the preview — your browser may be using a cached version. Hard-refresh (Ctrl+Shift+R) to see the latest.
- Only two colors show — you need at least two color stops. Use the '+ Add stop' button to add more.
- Color transition looks muddy or gray in the middle — this is a known artifact of sRGB interpolation. The preview uses the same interpolation your browser will use, so what you see is what you get.
- Gradient doesn't show on older browsers — CSS gradients require modern browsers. The tool includes a solid background-color fallback.
FAQ
What is the difference between linear, radial, and conic gradients?
Linear gradients flow along a straight line at an angle you choose. Radial gradients spread outward from a center point in a circle or ellipse. Conic gradients sweep around a center like a color wheel — think of it as a clock face where each hour mark is a different color.
How do color stops work?
Each color stop pairs a color with a position (0-100%). Position 0% is the start of the gradient, 100% is the end. Without explicit positions, stops are evenly spaced. Adding intermediate stops gives you precise control over where color transitions happen.
Can I use the generated CSS commercially?
Yes. The CSS is generated entirely in your browser — no license restrictions. Use it in personal or commercial projects.
Do I need vendor prefixes for CSS gradients?
No. All three gradient types (linear, radial, conic) are supported without prefixes in every evergreen browser since ~2020. The generated CSS is prefix-free.
What happens if I set only two color stops?
You get a smooth blend between those two colors. Add more stops to create complex multi-color transitions or hard edges.
Related tools
Prefer AllUtil on Google
One click adds AllUtil to your Google preferences. You'll see our tools highlighted with a Preferred badge in Search and AI answers.