$' '

CSS Gradient Generator Guide: Linear, Radial & Conic Gradients Explained

Q: How do I create a linear gradient in CSS?

Use the linear-gradient() function: background: linear-gradient(direction, color1, color2, ...). For example, linear-gradient(90deg, #6366f1, #22d3ee) creates a left-to-right gradient. You can use angles (deg), keywords (to right, to bottom), or combine them. Add more color stops for multi-color gradients.

Q: Can I use CSS gradients for text instead of backgrounds?

Yes! Use background-clip: text combined with -webkit-text-fill-color: transparent. Set a gradient as the background, then clip it to the text shape: background: linear-gradient(135deg, #6366f1, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

CSS gradients are one of the most powerful visual tools in web design. They add depth, vibrancy, and polish to websites without requiring a single image file. From subtle background washes to bold hero sections, gradients can transform flat designs into visually compelling experiences. This guide covers everything you need to know about CSS gradients — syntax, types, techniques, and how to use a CSS gradient generator to speed up your workflow.

What Are CSS Gradients?

A CSS gradient is an image created by transitioning between two or more colors along a defined path. Unlike raster images, gradients are rendered by the browser in real-time, meaning they scale perfectly at any resolution, load instantly, and can be animated with CSS transitions.

Gradients are specified using CSS image functions: linear-gradient(), radial-gradient(), conic-gradient(), and their repeating variants. You apply them the same way you'd apply any background image.

Linear Gradients

Linear gradients transition colors along a straight line. The direction is controlled by an angle or keyword.

Basic Syntax

background: linear-gradient(direction, color1, color2, ...);

Using Keywords

/* Top to bottom (default) */
background: linear-gradient(#6366f1, #22d3ee);

/* Left to right */
background: linear-gradient(to right, #6366f1, #22d3ee);

/* Diagonal: top-left to bottom-right */
background: linear-gradient(to bottom right, #6366f1, #22d3ee);

Using Angles

Angles give you precise control over the gradient direction. 0deg points upward, and the angle rotates clockwise.

/* 0deg = bottom to top */
background: linear-gradient(0deg, #6366f1, #22d3ee);

/* 90deg = left to right */
background: linear-gradient(90deg, #6366f1, #22d3ee);

/* 135deg = diagonal */
background: linear-gradient(135deg, #6366f1, #22d3ee);

Multiple Color Stops

Add as many colors as you need, with optional position values:

/* Evenly distributed */
background: linear-gradient(90deg, #6366f1, #22d3ee, #10b981);

/* Custom positions */
background: linear-gradient(90deg, #6366f1 0%, #22d3ee 50%, #10b981 100%);

/* Hard edge (no blending) */
background: linear-gradient(90deg, #6366f1 50%, #22d3ee 50%);

Radial Gradients

Radial gradients transition colors outward from a center point in a circular or elliptical shape.

Basic Syntax

background: radial-gradient(shape size at position, color1, color2, ...);

Shape Options

/* Circle (default) */
background: radial-gradient(circle, #6366f1, #0f172a);

/* Ellipse */
background: radial-gradient(ellipse, #6366f1, #0f172a);

/* Positioned center */
background: radial-gradient(circle at top left, #6366f1, #0f172a);

/* With size keywords */
background: radial-gradient(circle closest-side, #6366f1, #0f172a);

Size Keywords

closest-side — Gradient reaches the nearest edge
farthest-side — Gradient reaches the farthest edge
closest-corner — Gradient reaches the nearest corner
farthest-corner — Gradient reaches the farthest corner (default)

Conic Gradients

Conic gradients rotate colors around a center point (like a color wheel or pie chart).

/* Full rotation */
background: conic-gradient(#6366f1, #22d3ee, #10b981, #6366f1);

/* Pie chart effect */
background: conic-gradient(#6366f1 0% 33%, #22d3ee 33% 66%, #10b981 66% 100%);

Repeating Gradients

Use repeating-linear-gradient(), repeating-radial-gradient(), or repeating-conic-gradient() to create patterns that tile automatically.

/* Striped pattern */
background: repeating-linear-gradient(
  45deg,
  #6366f1,
  #6366f1 10px,
  #22d3ee 10px,
  #22d3ee 20px
);

/* Polka dot effect */
background: repeating-radial-gradient(
  circle at 0 0,
  #6366f1 0px,
  #6366f1 5px,
  transparent 5px,
  transparent 15px
);

Advanced Techniques

Gradient Text

Apply gradients to text using background-clip: text:

.gradient-text {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Gradient Borders

Create gradient borders using a wrapper technique or the newer border-image:

.gradient-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  border-image: linear-gradient(135deg, #6366f1, #22d3ee) 1;
}

Layered Gradients

Stack multiple gradients for complex effects:

background:
  radial-gradient(circle at 20% 50%, rgba(99,102,241,0.3) 0%, transparent 50%),
  radial-gradient(circle at 80% 50%, rgba(34,211,238,0.3) 0%, transparent 50%),
  linear-gradient(135deg, #0f172a, #1e293b);

Common Gradient Effects

1. Glassmorphism Background

background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(34,211,238,0.1));
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);

2. Sunset Hero Section

background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 30%, #6366f1 70%, #22d3ee 100%);

3. Vignette Overlay

background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);

Using a CSS Gradient Generator

While writing gradient CSS by hand is straightforward for simple cases, a CSS gradient generator dramatically speeds up your workflow for complex gradients. Instead of guessing angle values and color positions, you get a visual editor where you can:

Drag color stops to precise positions
See changes in real-time
Copy production-ready CSS with one click
Experiment with multiple gradient types instantly
Preview how gradients look on actual UI elements

Frequently Asked Questions

How do I create a linear gradient in CSS?

Use the linear-gradient() function: background: linear-gradient(direction, color1, color2, ...). For example, linear-gradient(90deg, #6366f1, #22d3ee) creates a left-to-right gradient. You can use angles (deg), keywords (to right, to bottom), or combine them. Add more color stops for multi-color gradients.

What is the difference between linear and radial gradient in CSS?

A linear gradient transitions colors along a straight line (top to bottom, left to right, or any angle). A radial gradient transitions colors outward from a center point in a circular or elliptical shape. Linear gradients work well for backgrounds, buttons, and headers. Radial gradients are great for spotlights, vignettes, and circular elements.

Can I use CSS gradients for text instead of backgrounds?

Yes! Use background-clip: text combined with -webkit-text-fill-color: transparent. Set a gradient as the background, then clip it to the text shape. This technique works in all modern browsers and is widely used for eye-catching headings.

How do I add multiple color stops in a CSS gradient?

List multiple colors separated by commas, optionally with position values. For example: linear-gradient(90deg, #6366f1 0%, #22d3ee 50%, #10b981 100%). The percentage values define where each color starts. Without positions, colors are evenly distributed. You can also use pixel values or calc() for dynamic positioning.

🎨 Build stunning gradients visually. Try our free CSS Gradient Generator — drag, drop, and copy production-ready CSS.

Related Tools

CSS Gradient Generator

Visual gradient builder with live preview

Color Converter

Convert colors between HEX, RGB, HSL

Box Shadow Generator

Design perfect shadows for your elements