Generator
CSS Gradient Generator
Blend two colours into a smooth linear or radial gradient. Adjust the angle and see the CSS update as you go.
Live Tool
gradient.css
Live
Preview
1How To Use
Follow these steps — no coding experience needed.
- Pick two coloursChoose a start and end colour using the swatches or by typing a hex code.
- Choose linear or radialLinear blends in a straight line; radial blends outward from the centre.
- Set the angleFor linear gradients, drag the slider to rotate the direction of the blend.
- Copy the CSSPaste the single background line into any element's style or stylesheet.
2Example Output
What this code looks like once it's on a real page.
A call-to-action button or section background — gradients like this add depth without needing an image file.
3Browser Compatibility
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✓ Supported | Full support |
| Firefox | ✓ Supported | Full support |
| Safari | ✓ Supported | Full support |
| Edge | ✓ Supported | Full support |
| Opera | ✓ Supported | Full support |
| Mobile browsers | ✓ Supported | Full support, iOS & Android |
Supported in every current browser — Chrome, Firefox, Safari, Edge and Opera all render this identically, on both desktop and mobile.
→Related Pages
More tools that pair naturally with this one.