CSS Gradient Generator
Pick colours and stop positions, choose a linear angle or a radial circle, and copy the ready-made CSS background rule.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the CSS Gradient Generator
A CSS gradient is a background image the browser draws itself, so it needs no download and stays sharp at any size. This generator lets you build one visually: choose colours, set where each colour sits along the gradient, and copy a ready-to-paste background declaration.
There are two modes. Linear draws colour bands along a straight line, and the angle slider runs from 0° to 360°: 0° goes from bottom to top, 90° from left to right. Radial spreads the colours outward from the centre in a circle. Each colour stop has a colour, picked with the swatch or typed as a hex value, an rgb() value or a colour name, and a position from 0% to 100%. Two stops are the minimum; add more for multi-colour effects, or give two neighbouring stops the same position to get a hard edge instead of a blend.
For example, #667eea at 0% and #764ba2 at 100% with a 135° angle give the purple diagonal shown when the page loads, written as background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);. Stops are written in position order, so it doesn't matter in which order you add them.
Need colours that work together first? Build a scheme with the Color Palette Generator, then make sure text placed on top of the gradient stays readable with the Contrast Checker.
How to use the CSS Gradient Generator
- 1
Pick Linear or Radial
Use the toggle above the colour stops. For Linear, drag the Angle slider to set the direction.
- 2
Set the colour stops
Click a swatch to choose a colour or type a value into the text box, then enter each stop’s position as a percentage.
- 3
Add or remove stops
Click Add Stop for another colour or the × next to a stop to remove it (two always remain). Random picks two new colours and a new angle.
- 4
Try a preset
Click one of the six preset swatches to load its two colours.
- 5
Copy the CSS
Click Copy next to CSS Code and paste the background line into your stylesheet.
What it can do
Live preview
The large preview box redraws on every change, using exactly the CSS you copy.
Linear and radial modes
Linear gradients at any whole-degree angle, or circular radial gradients from the centre.
Multiple colour stops
Start with two and add more as needed, each with its own colour and percentage position.
Presets and random
Six two-colour presets and a Random button for quick starting points.
Plain CSS output
One standard background declaration without vendor prefixes, supported by current versions of Chrome, Edge, Firefox and Safari.
Limitations
- Conic gradients, repeating gradients, and elliptical or off-centre radial gradients are not available; edit the copied CSS by hand if you need them.
- Stop positions are percentages only; pixel positions and colour hints are not supported.
- The colour swatch can only display six-digit hex colours. If you type a named, rgb() or transparent colour, the swatch shows black, but the preview and CSS use your value.
- Settings are not saved; reloading the page resets them.
Privacy
Everything happens in your browser; the colours you choose are not sent anywhere.
Frequently asked questions
How do I use the copied code?
Paste it inside a CSS rule, for example .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }. It works on any element that can have a background, including body.
Which way does the angle point?
CSS measures gradient angles clockwise from the top. 0° runs from bottom to top, 90° from left to right and 180° from top to bottom, so 135° runs from the top-left corner towards the bottom-right.
How do I make a sharp stripe instead of a smooth blend?
Give two stops the same position. For example, red at 50% followed by blue at 50% switches colour abruptly at the halfway point instead of fading.
Can a gradient fade to transparent?
Yes. Type a colour with an alpha value into the stop’s text box, such as rgba(0, 0, 0, 0.5), transparent or an 8-digit hex like #00000080. The swatch cannot show it, but the preview and copied CSS will use it.
Do I need -webkit- prefixes?
Not for current browsers. Unprefixed linear-gradient() and radial-gradient() have been supported by Chrome, Edge, Firefox and Safari for many years.
Ratings & Reviews
Rate CSS Gradient Generator
Help others by sharing your experience. Your rating is shown without your name.
More Developer Tools
View all →Code Beautifier
Re-indent JavaScript, SQL, JSON, HTML, CSS and XML code
JSON Formatter & Validator
Validate, pretty-print or minify JSON
XML Validator
Check that XML is well-formed and see where it breaks
Markdown Editor
Write Markdown with a live GitHub-style preview