CSS gradient generator
Create CSS linear or radial gradients visually. Adjust colours, stops and angle, then copy the ready-to-use CSS code.
- Free, no sign-up
- No data stored
- Reviewed 2026-01-15
Your details
Results
- Colour stops
- 3
- Angle
- 135°
- Type
- linear
Preview
Presets
SunriseOceanMidnightCitrusForestCSS
.hero {
background: #12805A;
background: linear-gradient(135deg, #12805A 0%, #0D5F8F 50%, #5B4BBD 100%);
}Tailwind (arbitrary)
class="[background:linear-gradient(135deg,_#12805A_0%,_#0D5F8F_50%,_#5B4BBD_100%)]"SCSS variable
$gradient-brand: linear-gradient(135deg, #12805A 0%, #0D5F8F 50%, #5B4BBD 100%);About the CSS Gradient Generator
Build CSS gradients by choosing colours, stop positions, gradient type (linear/radial) and angle. A live preview shows the gradient in real time. An optional third colour stop enables richer transitions. Copy the generated CSS for use in your stylesheets.
How to use the CSS Gradient Generator
- Choose start and end colours.
- Optionally add a middle colour.
- Select gradient type and angle.
- Adjust colour stop positions.
- Copy the CSS code.
Frequently asked questions
What is the difference between linear and radial?
Linear gradients transition along a straight line (top to bottom, left to right, etc.). Radial gradients radiate outward from a centre point.
How do colour stops work?
Each stop defines where a colour should be at full strength (0%–100%). The browser interpolates smoothly between stops.
Is the gradient cross-browser compatible?
The standard syntax (linear-gradient, radial-gradient) is supported by all modern browsers. No vendor prefixes needed for current versions.