How do I add a gradient background in CSS?

Use the background-image property: background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4). You can also set it as background directly: background: linear-gradient(...). This generator produces the complete CSS declaration for you.

What are the different gradient types?

Linear gradients go from one side to another. Radial gradients spread outward from a center point. Conic gradients sweep around a center point like a color wheel or pie chart. Each type takes different arguments.

Can I use gradients as a background for elements other than the page?

Yes. CSS gradients work on any element with a background property: divs, buttons, sections, pseudo-elements, and more. They also support multiple layered gradients using comma-separated values.

How do I layer a gradient over an image?

List both layers in one background-image value, gradient first: background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), url(photo.jpg). This generator writes opaque hex stops, so change the stop colors to rgba() by hand for a see-through overlay.

CSS background gradient generator

Create CSS gradient backgrounds for your website. Choose between linear, radial, and conic gradient types. Add and position color stops, then copy the full background CSS declaration with one click. The live preview shows a 16:9 rectangle so you can see exactly what your gradient will look like. All generation runs locally in your browser.

CSS

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

GRADIENT

Type

Angle: 135deg

0deg360deg

Color stops

#3b82f6

#8b5cf6

100%

How it works

The CSS gradient string is built from the selected type, angle, and color stops. For linear gradients: linear-gradient(Ndeg, color1 P1%, color2 P2%, ...). For radial: radial-gradient(circle, ...). For conic: conic-gradient(from Ndeg, ...). Color stops are sorted by position before the string is assembled. The string is applied directly as a CSS background property on the preview element. All processing runs in JavaScript in your browser.

Processing runs in your browser

All processing happens locally in your browser tab. Our servers are not involved at any point.

Related operations

For building a coordinated multi-colour set first, try the colour palette generator. To soften or deepen any stop value, use tints and shades. For converting your stop colours between formats, see the colour converter.

Frequently asked questions

How do I add a gradient background in CSS?: Use the background-image property: background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4). You can also set it as background directly: background: linear-gradient(...). This generator produces the complete CSS declaration for you.
What are the different gradient types?: Linear gradients go from one side to another. Radial gradients spread outward from a center point. Conic gradients sweep around a center point like a color wheel or pie chart. Each type takes different arguments.
Can I use gradients as a background for elements other than the page?: Yes. CSS gradients work on any element with a background property: divs, buttons, sections, pseudo-elements, and more. They also support multiple layered gradients using comma-separated values.
How do I layer a gradient over an image?: List both layers in one background-image value, gradient first: background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), url(photo.jpg). This generator writes opaque hex stops, so change the stop colors to rgba() by hand for a see-through overlay.

Last reviewed September 30, 2026

Other pages for this tool

Related tools

Background reading: Complete guide to color tools
Step by step: Build a color system for a design project