How to create a CSS gradient
- Choose linear, radial or conic depending on the visual direction you need.
- Set the angle, shape or center position.
- Add color stops by clicking the gradient strip or using the Add button.
- Drag stops or enter percentages to control transitions precisely.
- Use reverse, distribute and random tools to explore variations, then copy or download the CSS.
Linear, radial and conic gradients
Linear gradients blend along a line and are common for backgrounds and overlays. Radial gradients expand from a center point and work well for lighting effects. Conic gradients rotate colors around a center and are useful for color wheels, charts and decorative effects. Repeating variants tile the defined transition pattern.
Gradient design tips
- Use two or three purposeful colors for clean interface backgrounds.
- Place stops closer together for sharper transitions and farther apart for smoother blends.
- Check text contrast across the complete gradient, not only at its endpoints.
- Avoid excessive saturated colors behind long-form text.
Frequently Asked Questions
Does CSS need browser prefixes for gradients?
Modern browsers support standard gradient syntax without prefixes. The generated output uses the standard background declaration.
How many color stops can I add?
This editor supports up to twelve stops to keep the interface manageable while covering complex practical gradients.
What is a repeating gradient?
A repeating gradient repeats the color-stop pattern after its final stop. If the final stop is at 100%, the repetition may not be visually obvious within one element.
Is my gradient uploaded?
No. The design state, preview and CSS generation run locally in your browser. The current state is stored locally only to restore your work after refresh.