How to create a CSS gradient
- Pick a linear or radial gradient.
- Adjust the angle, or the shape for radial gradients.
- Edit, add or remove color stops and drag their positions.
- Copy the CSS and paste it into your stylesheet.
Gradient syntax
linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%) starts with an angle or direction, followed by a comma-separated list of colors with optional positions. 0deg points up and angles turn clockwise, so 90deg goes left to right.
Frequently asked questions
What is the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at a given angle. A radial gradient blends outward from a center point in a circle or ellipse.
Do CSS gradients need vendor prefixes?
No. linear-gradient() and radial-gradient() have been supported unprefixed in all major browsers for years, so the generated CSS works as-is.
Can I use a gradient as a text color?
Yes. Set the gradient as the background, then add background-clip: text and color: transparent to the text element.
How do I make a hard color stop?
Give two adjacent stops the same position, for example red 50% and blue 50%, to get a sharp line instead of a blend.