CSS Gradient Generator
Design a linear or radial gradient, adjust the colors and stop positions, and copy ready-to-use CSS. The preview updates as you change each control.
Your input stays in your browser and is not sent to a server by this page.
What it is and when to use it
A CSS gradient is an image the browser draws for you, so it scales to any size and needs no file download. You set it with the background or background-image property using linear-gradient() or radial-gradient(). Use this tool to try colors and angles visually, then copy the finished CSS.
How to use
- Choose linear or radial.
- Set the angle (linear) or the shape and center (radial).
- Edit colors and positions, or add up to five stops.
- Select Copy CSS and paste it into your stylesheet.
Example
Linear, 90deg, #2563eb 0% to #93c5fd 100%
background: #2563eb; background: linear-gradient(90deg, #2563eb 0%, #93c5fd 100%);
Tips and common mistakes
- Add a solid
background-colorbefore the gradient line as a fallback, so the element still looks right if the gradient fails to load. - Two color stops at the same position create a hard edge instead of a smooth blend, which is useful for stripes.
- Check text contrast against both the lightest and darkest part of the gradient, not just the average color.
- Subtle gradients between very similar colors can show visible bands. Increase the difference between stops to reduce banding.
Frequently asked questions
Why are there two background lines?
The first line is a plain color used as a fallback if gradients are unsupported. The second line is the gradient itself.
How many colors can I use?
Between two and five stops. Stop positions are percentages from 0 to 100.
Does it support transparency?
This version uses solid 6-digit hex colors. You can edit the copied CSS to use rgba() or hsla() values.