Create a CSS linear gradient

With Gradient generator, designers and front-end developers can tune an interface before implementation. Create a CSS linear gradient.

Create a CSS linear gradient. Use it free in your browser without creating an account, then review the result before moving to the next step.

How to use

Enter the angle of the gradient in degrees first; it decides which way the colours move across the element.
Add the starting colour on the next line and the ending colour below it.
Generate the gradient: the result area shows a line of CSS you can copy straight into your project.
Paste that line into the rule you are working on, then reload the page to see how it actually looks.
Change the angle or a colour and generate again as often as you like before settling on a final style.

Example

The sample uses a 45 degree angle with a very dark blue at the start and a strong green at the end. Once it is generated, compare the line you get with what you had in mind: the angle sets the direction while the colour order decides the shade at each end.

Input

45
#0F172A
#16A34A

Output

background: linear-gradient(45deg, #0F172A, #16A34A);

Limits and formats

Only straight-line gradients are produced; radial, conic and repeating variants need a different syntax.
Two colours give a simple blend, but intermediate stops cannot be adjusted from this page.
The result depends on the visitor's screen and browser, and a very contrasty blend can tire the eye when text sits on top.
Check the contrast if you place text over the gradient, because readability cannot be judged from the code alone.

Where processing happens

The gradient is generated in your browser. The angle and both colours stay on your device, nothing is transmitted and nothing is kept once you leave the page, so the snippet you copy out is built entirely on your own machine.

Frequently asked questions

Can I reuse the generated code in another rule?

Yes. The line follows the standard syntax for a linear gradient and fits into any background declaration. Copy it as it stands and change only the colours if your palette moves on later.

How do I get a gradient that runs from top to bottom?

Nudge the angle in small steps and keep the value that puts your first colour at the top of the element. Since the result is checked by reloading the page, one or two attempts are usually enough to land on the direction you want.

Can I use more than two colours?

This page starts from a beginning colour and an ending colour, so a three-tone blend cannot be set up here directly. You can still generate a first pair and then add the extra stops by hand in your own style sheet.