CSS Gradient Generator

Create beautiful linear, radial, and conic gradients with a live preview. Customize colors, angles, and stops — copy the CSS instantly.

Gradient Type

Angle: 180°

→

Direction Presets

Background Fallback Color

Color Stops

Preset Gradients

Preview

CSS Code

How to Use the CSS Gradient Generator

Choose Gradient Type

Select from Linear (straight line), Radial (circular), or Conic (color wheel) gradient types. Each type creates a different visual effect.

Customize Colors

Add, remove, or reorder color stops. Click the color swatch to pick a color and use the slider to set the position. Use presets for quick inspiration.

Copy and Use

The CSS code updates in real time. Click Copy CSS to copy the generated gradient code to your clipboard and paste it into your stylesheet.

CSS Gradient Properties Reference

Property	Values	Description
`background-image`	`linear-gradient(...)`, `radial-gradient(...)`, `conic-gradient(...)`	Defines the gradient pattern as the background image
`background-size`	`cover`, `contain`, `100% 100%`, `auto`	Controls how the gradient fills the element's background area
`background-position`	`center`, `top left`, `50% 50%`, pixel values	Sets the starting position of the gradient within the element
`background-repeat`	`repeat`, `no-repeat`, `repeat-x`, `repeat-y`	Determines if and how the gradient repeats when it doesn't fill the entire area
`background` (shorthand)	Combines color + image + position + size + repeat	All-in-one property — use `background: linear-gradient(...) no-repeat center/cover;` to apply and position a gradient in one line

Gradients are applied via background-image. For a fallback color (for older browsers), always specify a background-color before the gradient. Modern browsers apply both: the solid color shows while the gradient loads, then the gradient overlays it.

Frequently Asked Questions

Linear gradients go in a straight line (any angle). Radial gradients radiate from a center point outward in circles or ellipses. Conic gradients rotate around a center point like a color wheel.

Color stops define where each color begins and ends. The position (0-100%) determines where the color is at full intensity. Between stops, colors blend smoothly. More stops create more complex gradients.

Yes, the generated CSS uses standard CSS gradient syntax that works in all modern browsers. Copy the CSS and paste it into your stylesheet. No vendor prefixes needed for modern browsers.

Use the preset gradients for inspiration. Good gradients use colors that are harmonious — adjacent on the color wheel (analogous) or complementary. Avoid combining too many bright colors.