ToolStack › CSS Gradient Generator
Developer Tool

CSS Gradient
Generator

Build beautiful linear, radial, and conic gradients visually. Add colour stops, adjust angles, and copy production-ready CSS in one click.

Gradient Type
Linear
Radial
Conic
Direction °
Repeating
Colour Stops
Presets
CSS Output

Linear Gradient

Goes in a straight line from one colour to another. Use an angle (0°–360°) or direction keywords. background: linear-gradient(135deg, #f00, #00f)

Radial Gradient

Radiates outward from a centre point. Choose circle or ellipse shape. Great for spotlight effects and glowing backgrounds. background: radial-gradient(circle, #f00, #00f)

Conic Gradient

Rotates colours around a centre point like a pie chart. Brilliant for creating colour wheels and pie chart visuals with pure CSS. background: conic-gradient(#f00, #0f0, #00f)

Colour Stops

You can control exactly where each colour begins and ends using percentage positions. Multiple stops enable complex multi-colour gradients. Stops default to even spacing if no position is set.

FAQ
What CSS property should I use this with? ▾
Use background or background-image on any element. Gradients can also be used in border-image, mask-image, and even list-style-image. They work anywhere an image value is accepted in CSS.
How do I make a gradient text effect? ▾
Apply the gradient to background, then add -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the background to the text shape, revealing the gradient through the letters.
Do CSS gradients work in all browsers? ▾
Linear and radial gradients have 99%+ browser support. Conic gradients have 97%+ support (not in very old IE/Edge Legacy). Repeating variants have equivalent support to their base type. No vendor prefixes are needed for modern browsers.
How do I add a gradient overlay on an image? ▾
Stack a gradient and image using multiple backgrounds: background: linear-gradient(rgba(0,0,0,0.5), transparent), url('image.jpg'). The gradient sits on top of the image, creating a darkening overlay effect common for hero sections.
Related Tools
🎯
Colour Picker
HEX · RGB · HSL · Palette generator
→
⧉
Box Shadow Generator
Visual builder · Multi-layer · Copy CSS
→
{ }
JSON Formatter
Format · Validate · Minify · Error highlight
→
Aa
Text Case Converter
camelCase · snake_case · Title Case · more
→
How to Use the CSS Gradient Generator

Build beautiful linear and radial gradients visually and copy the CSS in one click.

01
Choose gradient type
Linear goes in a straight line (any direction). Radial radiates from a central point. Linear is most common for backgrounds and hero sections.
02
Set the direction
For linear gradients, drag the angle dial or type a degree value. 0° = bottom to top. 90° = left to right. 135° = top-left to bottom-right.
03
Add and adjust colour stops
Each stop is a colour point along the gradient. Drag stops left/right to adjust where they appear. Click a stop to change its colour using the colour picker.
04
Add more stops
Click '+ Add stop' for multi-colour gradients. Three or more stops allow complex, vibrant effects.
05
Copy the CSS
Click 'Copy CSS' to get the complete background property with cross-browser prefixes. Paste directly into your stylesheet.
💡
💡 For subtle, profess
✅Free forever — no subscription, no API key
🔗Backlink credit drives referral traffic to you
🔒Files never uploaded — GDPR/CCPA friendly
📱Fully responsive — works on mobile and desktop
Advertisement