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.
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.