CSS Gradient Generator
Generate CSS gradients visually. Linear, radial, and conic types with live preview, colour stops, angle control, and instant CSS code output. Free, no signup.
Loading tool...
How to Use CSS Gradient Generator
- Choose a gradient type: Linear, Radial, or Conic
- Adjust the angle slider for linear and conic gradients
- Pick colours for each stop using the colour pickers
- Drag the position sliders to control where each colour starts and ends
- Add extra colour stops with the Add Stop button (up to 6)
- Toggle the -webkit- prefix checkbox if you need legacy browser support
- Click a preset to load a pre-built gradient for inspiration
- Copy the CSS output and paste it into your stylesheet
About CSS Gradient Generator
The CSS Gradient Generator lets you create beautiful linear, radial, and conic CSS gradients with a live visual editor. Adjust colour stops, angle, and gradient type, then copy the ready-to-use CSS code directly into your stylesheet. Includes 8 built-in presets and a randomise button for instant inspiration.
Common Use Cases
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition colours along a straight line at a given angle. Radial gradients radiate outward from a centre point in a circular shape. Conic gradients rotate colours around a centre point like a colour wheel.
Do I need the -webkit- prefix in 2026?
For modern browsers (Chrome, Firefox, Safari, Edge), no prefix is needed. The -webkit- prefix may be needed for very old versions of Safari. For most projects you can leave the prefix option unchecked.
Can I use more than two colours?
Yes — click Add Stop to add up to 6 colour stops. Each stop has its own colour and position along the gradient.
How do I make a gradient text effect?
Apply the gradient as a background, then add background-clip: text and -webkit-background-clip: text with color: transparent. This clips the gradient to the text shape and is supported in all modern browsers.
Related Tools
Color Picker
Pick colors and get HEX, RGB, and HSL values instantly. Convert between color formats. Free online color tool for designers and developers.
Color Contrast Checker
Check colour contrast ratios against WCAG AA and AAA accessibility standards. Live preview with foreground and background colour pickers. Free, no signup.
CSS Minifier
Minify CSS code to reduce file size and improve page load speed. Removes whitespace, comments, and optimizes selectors. Free online CSS compressor.