How to use
- Choose two or three colours.
- Pick the gradient type and angle.
- Check the live preview.
- Click Copy to copy the CSS and paste it into your stylesheet.
How it works
The code uses the standard CSS functions linear-gradient(), radial-gradient() and conic-gradient(), which work in all modern browsers without prefixes.
Tips and common uses
Backgrounds, buttons and banners
Paste the copied code into the background or background-image property of a section, button or banner. Two close colours look subtle; two far-apart colours look bold.
Keep text readable
Text on a gradient can be easy to read at one end and hard at the other. Check the lightest and darkest parts against your text colour with the Colour Contrast Checker.
Add a fallback colour
Put a plain background-color line before the gradient, so the section still has a sensible colour if the gradient cannot load. Conic gradients also suit simple pie-chart shapes.
Frequently asked questions
How do I use the code?
Paste it inside a CSS rule, for example: .hero { background: linear-gradient(…); }
Can I use a gradient for text?
Yes: add background-clip: text and color: transparent to the element along with the gradient background.
Why do some gradients look grey in the middle?
Mixing opposite colours (like blue and yellow) passes through grey. Add a third colour in between, or pick colours that are closer on the colour wheel.