What are CSS gradients and how do they work?

CSS gradients create smooth color transitions rendered as images. They can be linear (along a line), radial (from a center point), or conic (around a center point). Gradients are resolution-independent and don't require image files.

How do I create a CSS gradient online?

Choose gradient type (linear, radial, conic), add color stops with positions, adjust angle or center position, preview in real-time, and copy the generated CSS. Use presets for popular gradient combinations or create custom gradients.

What is a linear gradient in CSS?

Linear gradients transition colors along a straight line at a specified angle. Syntax: linear-gradient(angle, color1, color2, ...). Example: linear-gradient(90deg, red, blue) creates a horizontal gradient from red to blue.

What is a radial gradient in CSS?

Radial gradients transition colors outward from a center point in a circular or elliptical shape. Syntax: radial-gradient(shape size at position, color1, color2). Example: radial-gradient(circle, white, black) creates a circular gradient.

What is a conic gradient in CSS?

Conic gradients transition colors around a center point like a color wheel. Syntax: conic-gradient(from angle at position, color1, color2). Great for pie charts, color wheels, and circular progress indicators.

How do color stops work in CSS gradients?

Color stops define where each color appears in the gradient. Use percentages (0-100%) or lengths. Colors blend smoothly between stops. Example: linear-gradient(red 0%, yellow 50%, green 100%). Stops can overlap for hard edges.

Can I use more than two colors in a gradient?

Yes! Add as many color stops as needed. Each stop can have a position. Example: linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%) creates a rainbow effect. More stops = more complex gradients.

What are repeating gradients in CSS?

Repeating gradients (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) tile the gradient pattern. Great for stripes, patterns, and textures. Example: repeating-linear-gradient(45deg, red 0px, red 10px, white 10px, white 20px).

How do I layer multiple gradients?

Separate gradients with commas in the background property. First gradient is on top. Use transparency (rgba or transparent) for layering effects. Example: background: linear-gradient(rgba(0,0,0,0.5), transparent), linear-gradient(blue, green);

What is the angle in linear gradients?

0deg points up, 90deg points right, 180deg points down, 270deg points left. Or use keywords: to top, to right, to bottom, to left, to top right, etc. Default is 180deg (to bottom).

How do I center a radial gradient?

Use "at center" (default) or specify position: radial-gradient(circle at top left, red, blue). Position can be keywords (top, center, bottom, left, right) or percentages/lengths (at 25% 75%).

Can I animate CSS gradients?

Gradients can't be directly animated with CSS transitions. Workarounds: animate background-position on a larger gradient, use CSS custom properties (variables) with @property, or transition between classes with different gradients.

What is background-blend-mode with gradients?

Blend modes control how layered gradients combine: multiply (darken), screen (lighten), overlay (contrast), soft-light, hard-light, difference, and more. Creates unique color effects when combining gradients or gradient + image.

Are CSS gradients supported in all browsers?

Linear and radial gradients have excellent support in all modern browsers. Conic gradients need Safari 12.1+, Chrome 69+, Firefox 83+. No vendor prefixes needed for current browsers.

Is my gradient configuration secure when using this tool?

Yes! All CSS gradient generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

What are CSS gradients and how do they work?

CSS gradients create smooth color transitions rendered as images. They can be linear (along a line), radial (from a center point), or conic (around a center point). Gradients are resolution-independent and don't require image files.

How do I create a CSS gradient online?

Choose gradient type (linear, radial, conic), add color stops with positions, adjust angle or center position, preview in real-time, and copy the generated CSS. Use presets for popular gradient combinations or create custom gradients.

What is a linear gradient in CSS?

Linear gradients transition colors along a straight line at a specified angle. Syntax: linear-gradient(angle, color1, color2, ...). Example: linear-gradient(90deg, red, blue) creates a horizontal gradient from red to blue.

What is a radial gradient in CSS?

Radial gradients transition colors outward from a center point in a circular or elliptical shape. Syntax: radial-gradient(shape size at position, color1, color2). Example: radial-gradient(circle, white, black) creates a circular gradient.

What is a conic gradient in CSS?

Conic gradients transition colors around a center point like a color wheel. Syntax: conic-gradient(from angle at position, color1, color2). Great for pie charts, color wheels, and circular progress indicators.

How do color stops work in CSS gradients?

Color stops define where each color appears in the gradient. Use percentages (0-100%) or lengths. Colors blend smoothly between stops. Example: linear-gradient(red 0%, yellow 50%, green 100%). Stops can overlap for hard edges.

Can I use more than two colors in a gradient?

Yes! Add as many color stops as needed. Each stop can have a position. Example: linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%) creates a rainbow effect. More stops = more complex gradients.

What are repeating gradients in CSS?

Repeating gradients (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) tile the gradient pattern. Great for stripes, patterns, and textures. Example: repeating-linear-gradient(45deg, red 0px, red 10px, white 10px, white 20px).

How do I layer multiple gradients?

Separate gradients with commas in the background property. First gradient is on top. Use transparency (rgba or transparent) for layering effects. Example: background: linear-gradient(rgba(0,0,0,0.5), transparent), linear-gradient(blue, green);

What is the angle in linear gradients?

0deg points up, 90deg points right, 180deg points down, 270deg points left. Or use keywords: to top, to right, to bottom, to left, to top right, etc. Default is 180deg (to bottom).

How do I center a radial gradient?

Use "at center" (default) or specify position: radial-gradient(circle at top left, red, blue). Position can be keywords (top, center, bottom, left, right) or percentages/lengths (at 25% 75%).

Can I animate CSS gradients?

Gradients can't be directly animated with CSS transitions. Workarounds: animate background-position on a larger gradient, use CSS custom properties (variables) with @property, or transition between classes with different gradients.

What is background-blend-mode with gradients?

Blend modes control how layered gradients combine: multiply (darken), screen (lighten), overlay (contrast), soft-light, hard-light, difference, and more. Creates unique color effects when combining gradients or gradient + image.

Are CSS gradients supported in all browsers?

Linear and radial gradients have excellent support in all modern browsers. Conic gradients need Safari 12.1+, Chrome 69+, Firefox 83+. No vendor prefixes needed for current browsers.

Is my gradient configuration secure when using this tool?

Yes! All CSS gradient generation happens 100% in your browser using JavaScript. Your configurations are NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy.

CSS Gradient Generator

simple

Create CSS gradients with multiple color stops. Support for linear, radial, and conic gradients with live preview and code export.

Web Developmentcssgradientlinearradial

100% Private - Runs Locally

How to Use

1Choose gradient type
2Add color stops
3Adjust angle/position
4Copy CSS code

Examples

Linear Gradient

Input

Two-color horizontal

Output

.gradient-element {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

Radial Gradient

Input

Center spotlight effect

Output

.gradient-element {
  background: radial-gradient(circle at center, #ffffff 0%, #000000 100%);
}

Conic Gradient

Input

Color wheel effect

Output

.gradient-element {
  background: conic-gradient(from 0deg at center, 
    #ff0000 0%, #ffff00 17%, #00ff00 33%, 
    #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

Multi-stop Gradient

Input

Rainbow effect

Output

.gradient-element {
  background: linear-gradient(90deg, 
    #ff0000 0%, #ff7f00 17%, #ffff00 33%, 
    #00ff00 50%, #0000ff 67%, #4b0082 83%, #9400d3 100%);
}

Repeating Gradient

Input

Striped pattern

Output

.gradient-element {
  background: repeating-linear-gradient(
    45deg,
    #606dbc 0px, #606dbc 10px,
    #465298 10px, #465298 20px
  );
}

Layered Gradients

Input

Multiple gradient layers

Output

.gradient-element {
  background: 
    linear-gradient(135deg, rgba(255,0,0,0.5) 0%, transparent 50%),
    linear-gradient(225deg, rgba(0,255,0,0.5) 0%, transparent 50%),
    linear-gradient(315deg, rgba(0,0,255,0.5) 0%, transparent 50%);
}

Frequently Asked Questions

Related Tools

View all

Box Shadow Generator

Advanced CSS box-shadow generator with 25+ presets (Material Design, Tailwind, Neumorphism, Glow effects), multiple layers, color picker with opacity, customizable preview, and 4 output formats (CSS, Tailwind, SCSS, React).

Color Palette Generator

Generate harmonious color palettes using color theory. Create complementary, analogous, triadic, and more color schemes.

.gradient-element { background: linear-gradient(135deg, rgba(255,0,0,0.5) 0%, transparent 50%), linear-gradient(225deg, rgba(0,255,0,0.5) 0%, transparent 50%), linear-gradient(315deg, rgba(0,0,255,0.5) 0%, transparent 50%); }