CSS Gradient Generator
Create linear and radial CSS gradients with 2–4 colour stops, live preview and copy-ready code.
Color stops
CSS
How to use the CSS Gradient Generator
- Choose linear or radial, and set the angle for a linear gradient.
- Pick two to four colors and set each stop's position.
- Watch the live preview update as you go.
- Click "Copy CSS" and paste the code into your stylesheet or page builder.
Why use the CSS Gradient Generator?
Gradients add depth to hero sections, buttons and social graphics without the weight of an image file. A CSS gradient scales perfectly to any screen and loads instantly because it is just a line of code. Finding the right angle and stop positions by trial and error in a code editor is slow; seeing the result live makes it easy to land on something subtle and polished. For readable text over a gradient, keep the colors close in lightness.
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. linear-gradient() and radial-gradient() work in all current browsers without vendor prefixes.
What does the angle mean?
0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom.
How can I avoid muddy gradients?
Colors on opposite sides of the color wheel can turn grayish in the middle. Try colors that are closer in hue, or add a brighter middle stop.
Can I use the gradient in WordPress?
Yes. Paste the CSS into Additional CSS, or use the gradient value in any block or page builder field that accepts custom CSS.