Developer Tools2026-03-308 min read|MJMinjae

CSS Gradient Guide: Linear & Radial Gradient Examples 2026

Master CSS gradients with practical examples. Learn linear-gradient, radial-gradient syntax, multi-color stops, and modern design trends.

Colorful CSS gradient examples displayed on a computer screen

CSS gradients are one of the most powerful tools in a web designer's toolkit. They create smooth, scalable color transitions without image files, resulting in faster page loads and infinite scalability. Whether you're designing a hero section, button hover effect, or an entire page background, understanding CSS gradients is essential for modern web development in 2026.

What Are CSS Gradients?

A CSS gradient is a special type of image generated by the browser using CSS code. Instead of loading an external image file, the browser calculates and renders color transitions on the fly. Gradients are specified using the background-image (or shorthand background) property and come in two main types: linear-gradient and radial-gradient.

No image files needed — pure CSS, zero HTTP requests
Infinitely scalable — looks sharp at any resolution, including Retina displays
Animatable — can be transitioned or animated with CSS transitions
Lightweight — typically just a few bytes of CSS compared to kilobytes for images

Try this tool now:

Try Our CSS Gradient Generator →

Linear Gradient Syntax

Linear gradients transition colors along a straight line. The basic syntax is: linear-gradient(direction, color-stop1, color-stop2, ...). The direction can be specified as an angle (e.g., 90deg) or keyword (e.g., to right, to bottom left).

/* Basic two-color gradient */
background: linear-gradient(to right, #667eea, #764ba2);

/* With angle */
background: linear-gradient(135deg, #f093fb, #f5576c);

/* Multiple color stops with positions */
background: linear-gradient(90deg, #0cebeb 0%, #20e3b2 50%, #29ffc6 100%);

/* Diagonal gradient */
background: linear-gradient(to bottom right, #000428, #004e92);

Radial Gradient Syntax

Radial gradients transition colors outward from a center point. They create circular or elliptical patterns. The syntax is: radial-gradient(shape size at position, color-stop1, color-stop2, ...).

/* Basic radial gradient */
background: radial-gradient(circle, #f5f7fa, #c3cfe2);

/* Elliptical gradient */
background: radial-gradient(ellipse, #fceabb 0%, #f8b500 100%);

/* Positioned gradient */
background: radial-gradient(circle at top left, #a18cd1, #fbc2eb);

Multi-Color Stops

Color stops define where each color appears in the gradient. By default, colors are evenly distributed, but you can specify exact positions using percentages or length values. This gives you precise control over how colors blend.

/* Hard color stop (no blending at 50%) */
background: linear-gradient(90deg, #ff0000 50%, #0000ff 50%);

/* Uneven distribution */
background: linear-gradient(90deg, #ff0000 0%, #ff0000 30%, #0000ff 70%, #0000ff 100%);

/* Transparent stops for overlay effects */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);

5 Practical Gradient Examples

Hero Section: linear-gradient(135deg, #667eea 0%, #764ba2 100%) — a professional purple gradient popular for SaaS landing pages
Text Gradient: background: linear-gradient(90deg, #f12711, #f5af19); -webkit-background-clip: text; color: transparent; — creates eye-catching gradient text
Glass Effect: background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); backdrop-filter: blur(10px); — modern glassmorphism
Button Hover: transition the background-position of a gradient that's 200% wide for smooth animated buttons
Dark Overlay: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%) layered over an image for readable text

QuickFigure vs Other Gradient Tools

While tools like cssgradient.io and webgradients.com are excellent references, QuickFigure's CSS Gradient Generator offers a streamlined experience: real-time preview, 12+ curated presets, random gradient generation, and both linear and radial support — all with one-click CSS code copying including -webkit- prefixes for maximum compatibility.

2026 Gradient Design Trends

Mesh gradients: Complex, multi-point color blends (achievable with multiple layered radial gradients)
Noise gradients: Adding subtle grain texture over smooth gradients for a tactile feel
Aurora effects: Soft, flowing gradients inspired by northern lights, using multiple color stops with gentle transitions
Monochromatic gradients: Single-hue gradients with varying lightness for elegant, minimalist designs
Gradient borders: Using background-clip and padding to create vibrant border effects

Try this tool now:

Create Your Gradient Now →

Frequently Asked Questions

Can I animate CSS gradients?

CSS gradients can't be directly transitioned with the transition property. However, you can animate them by transitioning background-position on an oversized gradient, using CSS @property for custom properties (supported in Chrome/Edge), or transitioning opacity between two gradient layers.

Do CSS gradients work in all browsers?

Yes, linear-gradient and radial-gradient are supported in all modern browsers. The -webkit- prefix is only needed for very old versions of Chrome (<26), Safari (<6.1), and Android Browser (<4.4). The unprefixed syntax has universal support in 2026.

How many color stops can I use?

There is no hard limit on the number of color stops in CSS gradients. You can use as many as you need. However, for performance and readability, 2-5 stops are typical. Complex mesh-like effects may use more.

What's the difference between conic-gradient and linear/radial?

Conic-gradient transitions colors around a center point (like a pie chart), while linear goes in a straight line and radial goes outward from center. Conic gradients are great for color wheels, progress indicators, and angular effects.

Can I use gradients with CSS background shorthand?

Yes, gradients work with the background shorthand property. You can even layer multiple gradients: background: linear-gradient(...), radial-gradient(...); — the first gradient is on top.