Home›Color Tools› Gradient makerBrowser
Build a CSS gradient
Pick two colors and an angle, see the result full width, and copy the CSS declaration straight into a stylesheet.
background: linear-gradient(135deg, #2f6feb, #a855f7);How to use it
- 1Pick the start and end colors.
- 2Set the angle — 0° runs upwards, and it turns clockwise from there.
- 3Copy the CSS declaration straight into your stylesheet.
Frequently asked questions
- Which way does the angle point?
- The CSS convention: 0deg points to the top, 90deg to the right, and it continues clockwise. That is a quarter turn away from the maths convention, which is the usual reason a gradient comes out rotated from what you expected.
- Why does my gradient look muddy in the middle?
- Because it crosses the middle of the color wheel. Blue to yellow passes through grey; blue to purple does not. Keep the two hues within reach of each other, or pick a mid-tone you actually want and stop there.
- Can I use more than two colors?
- Not on this page — it builds the two-stop declaration, which is the one most people need. The CSS syntax takes any number of stops, so the output is a starting point you can add to by hand.