Red to blue, left to right
Linear at 90° with #f00 at 0% and #00f at 100%: linear-gradient(90deg, #ff0000 0%, #0000ff 100%).
CSS Gradient Generator
Design linear, radial and conic CSS gradients with a live preview and copy the CSS.
CSS
background: linear-gradient(135deg, #ff6b1a 0%, #0f1b4c 100%);Runs in your browser — nothing you enter is sent to a server.
How the CSS Gradient Generator works
Choose a type, then set two or more colors and where each sits along the gradient, from 0% to 100%. The preview updates as you go, and the CSS below it is ready to paste into a background.
- Linear blends along a line at the angle you pick: 0° goes up, 90° to the right, 180° down.
- Radial spreads out from the center as a circle or an ellipse.
- Conic sweeps around the center, like a color wheel, starting at the angle you pick.
Colors can be typed as HEX, rgb() or hsl(), or picked. They are written as HEX in the CSS.
Examples
A color wheel start
Conic with a start angle of −90° is written as conic-gradient(from 270deg, …): angles are kept between 0° and 359°.
Frequently asked questions
Why does my gradient look muddy in the middle?
Browsers mix colors in sRGB, where two strong opposite colors (such as red and green) pass through grey. Add a middle color, or move the two stops closer together.
Can I put text on a gradient?
Yes, but check the contrast at both ends — text readable on the light end may disappear on the dark end.
Do all browsers support these gradients?
Linear and radial gradients work everywhere; conic gradients work in every current browser.
Related tools
Box Shadow Generator
Build layered CSS box shadows with sliders and a live preview, including inner shadows.
Design Tools
Color Palette Generator
Build color palettes from a base color with color-wheel harmonies, with HEX, RGB and HSL values.
Generators
Tint and Shade Generator
Make lighter tints and darker shades of a color, with a 50–900 scale of CSS variables.
Design Tools