Add smooth color blends to your design
A gradient is a smooth transition between two or more colors. Gradients make hero sections, buttons, cards and backgrounds look modern without loading any image file. CSS can draw them directly, so they stay sharp on every screen and add no download time. This generator helps you design a gradient visually and gives you the exact CSS.
How to create a CSS gradient
- Choose Linear (colors change along a straight line) or Radial (colors spread out from the centre in a circle).
- For a linear gradient, set the angle: 0° goes bottom to top, 90° left to right, 180° top to bottom.
- Pick two colors, or tick Use 3 colors for a richer blend.
- Click Copy CSS and paste it into the rule for your element.
Understanding the code
background: #4f46e5;
background: linear-gradient(135deg, #4f46e5, #ec4899);
The first line is a solid fallback color for very old browsers or email clients that do not support gradients. The second line draws the gradient. Colors are spread evenly unless you add positions, for example linear-gradient(90deg, red 0%, blue 70%), which makes the blend finish at 70 percent of the width.
Design tips
- Colors that sit near each other on the color wheel, such as blue and purple, blend smoothly. Opposite colors, like red and green, can create a muddy grey middle.
- Put text on gradients only when every part of the gradient has enough contrast with the text.
- Diagonal angles such as 135° often look more natural than straight horizontal or vertical blends.
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. Every modern browser supports linear and radial gradients without vendor prefixes.
Can I use a gradient on text?
Yes. Add -webkit-background-clip: text; background-clip: text; color: transparent; along with the gradient background.
Are gradients bad for page speed?
No. A CSS gradient is just a line of code and is far lighter than an image.