CSS gradient generator
Pick colours, set where each stop sits and choose an angle. The preview and the CSS update as you go, ready to paste into your stylesheet.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose Linear or Radial.
- For linear gradients, set the angle.
- Set each stop’s colour and position. Use Add stop for more colours, up to five, and Remove for fewer.
- Press Copy and paste the rule into your CSS.
What the output means
background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%); goes from orange at the left edge to dark red at the right. Each pair is a colour and the point where it is fully reached. Between two stops the browser blends the colours.
Example
Three stops: #ff7a18 at 0%, #ffffff at 50% and #af002d at 100% give a gradient that passes through white in the middle.
Tips
- Put two stops at the same position for a hard edge instead of a blend.
- Colours blend in sRGB, so mixing complementary colours can look grey in the middle; add a stop in between to control it.
- Check text on top of a gradient with the contrast checker at both ends.
Frequently asked questions
How do I change the direction?
For linear gradients, move the angle slider. 0° runs from bottom to top, 90° from left to right, 180° from top to bottom and 270° from right to left.
How many colours can I use?
Between 2 and 5 stops. Each has a position from 0 to 100 percent along the gradient line, and the tool sorts them in order in the CSS.
Will the code work in every browser?
linear-gradient() and radial-gradient() are supported by all current browsers without prefixes. The radial gradient here is a circle centred in the box.
Can I use it for text or borders?
Yes: the output is a plain gradient value in a background rule. Use the value with background-image, with border-image, or with background-clip: text for gradient text.