CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS. Everything runs in your browser, so your input isn’t uploaded.
Loading tool…
How to use the CSS Gradient Generator
- Pick a gradient type and, for linear and conic gradients, an angle.
- Choose colors and positions for each stop. Add or remove stops as needed.
- Copy the CSS.
Example
A left-to-right (90°) linear gradient from near-black to light grey, written as ready-to-paste CSS.
Type: linear Angle: 90 Stop 1: #111111 at 0% Stop 2: #e5e5e5 at 100%
background: linear-gradient(90deg, #111111 0%, #e5e5e5 100%);
About this tool
A CSS gradient fades smoothly between colors. Choose the type, angle and colors, and the preview and the CSS code update as you go.
Good to know
- Positions are percentages along the gradient line, and stops are written in order of position.
- Gradients are supported by every modern browser. Very old browsers may need a solid-color fallback.
- The output only contains values the tool generated, so it is safe to paste into your stylesheet.
Related tools
- HEX, RGB & HSL Color Converter – Convert colors between HEX, RGB and HSL, with transparency.
- CSS Box Shadow Generator – Design layered box shadows with sliders and copy the CSS.
- CSS Border Radius Generator – Round each corner independently, including elliptical corners, and copy the CSS.