CSS Gradient Generator

Create and customize gradients with live preview

Live Preview

Gradient Type

Color Stops

HEX Color

Position 0%

HEX Color

Position 50%

HEX Color

Position 100%

Linear Gradient Settings

Angle 90deg

0° 90° 180° 270° 360°

Additional Options

Repeating Gradient

Preview Size

Live Preview

CSS Code

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

Usage: Copy the CSS code and apply it to any element's background or background-image property.

Popular Presets

How to Use This Gradient Generator

Step-by-Step Guide

1

Choose Gradient Type

Select between Linear, Radial, or Conic gradient types.

2

Customize Colors

Add, remove, or adjust color stops. Click on color pickers to change colors.

3

Adjust Settings

Change angle, shape, size, and other gradient properties.

4

Copy & Use

Copy the generated CSS code and use it in your projects.

Common Use Cases

Website Backgrounds

Create stunning background gradients for headers, sections, and footers.

UI Elements

Design gradient buttons, cards, and other interactive elements.

Data Visualization

Use gradients in charts, graphs, and data visualization components.

Text Effects

Apply gradient backgrounds to text for modern typography effects.

Gradient Types Explained

Linear Gradient

Colors transition along a straight line at a specified angle.

linear-gradient(angle, color-stop1, color-stop2, ...)

Radial Gradient

Colors transition from a center point outward in a circular pattern.

radial-gradient(shape size at position, color-stop1, ...)

Conic Gradient

Colors transition rotated around a center point like a color wheel.

conic-gradient(from angle at position, color-stop1, ...)

Frequently Asked Questions

Linear gradients transition colors along a straight line at a specific angle. Radial gradients transition colors from a center point outward in a circular pattern. Conic gradients transition colors rotated around a center point (like a pie chart or color wheel).

Linear

Good for: Headers, buttons, backgrounds

Radial

Good for: Spotlight effects, circular elements

Conic

Good for: Pie charts, color wheels, progress circles

Simply copy the CSS code from the output box and paste it into your stylesheet. You can apply it to any HTML element:

/* Example usage */
.my-element {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  /* OR for background-image */
  background-image: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
}

You can also use it with background shorthand property or apply it to specific background properties like background-image, background, or even border-image.

CSS gradients have excellent browser support:

Linear gradients: Supported in all modern browsers (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+)
Radial gradients: Supported in all modern browsers (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+)
Conic gradients: Supported in Chrome 69+, Firefox 83+, Safari 12.1+ (check caniuse.com for latest)

For older browsers, you can provide a fallback solid color before the gradient declaration.