CSS Gradients Explained: How to Use Linear, Radial, and Conic Gradients

Gradients are one of the simplest ways to make a website feel more polished.

The best part is that modern CSS allows you to create gradients directly in the browser without uploading an image.

That means gradients can be lightweight, scalable, and easy to customize.

CSS provides several gradient types, but three of the most useful are linear gradients, radial gradients, and conic gradients.

Understanding how each one works gives you much more control over your designs.

Linear gradients

A linear gradient transitions between colors along a straight line.

A simple example is:

linear-gradient(90deg, #667eea, #764ba2)

The 90deg controls the direction.

You can experiment with different angles:

45deg

90deg

135deg

180deg

Changing the angle can completely change the composition.

A linear gradient is useful for:

• Hero sections

• Buttons

• Cards

• Navigation

• Website backgrounds

• Text effects

• Decorative elements

Radial gradients

A radial gradient spreads outward from a central point.

For example:

radial-gradient(circle, #667eea, #764ba2)

Instead of moving from one side to another, the colors expand from the center.

This makes radial gradients especially useful for creating glows.

You can place a subtle radial gradient behind a heading, product image, or illustration to create depth.

Conic gradients

Conic gradients rotate around a central point.

They're less commonly used than linear and radial gradients, but they can create interesting effects.

A simple example:

conic-gradient(#ff0080, #7928ca, #2afadf, #ff0080)

Conic gradients can be useful for:

• Color wheels

• Decorative graphics

• Circular UI elements

• Loading indicators

• Abstract backgrounds

• Modern visual effects

Multiple gradients

You don't have to use only one gradient.

CSS allows you to layer gradients.

For example, you could combine a linear gradient with a radial glow.

This can create much more complex backgrounds without using images.

A dark background with a few subtle radial glows can produce a sophisticated visual effect while keeping the page lightweight.

Color stops matter

Gradients aren't limited to two colors.

You can control where each color appears.

For example:

linear-gradient(90deg, #ff0000, #ffff00, #00ff00)

The transition can be adjusted by changing the position of the color stops.

This gives you much more control over the final result.

Don't overcomplicate it

CSS makes it possible to create extremely complex gradients.

But complexity isn't automatically better.

A simple two-color gradient can often look more professional than a complicated gradient containing ten colors.

Start simple.

Then add complexity only when it improves the design.

Gradients can replace images

One of the biggest advantages of CSS gradients is that they don't require an image file.

You can create backgrounds directly with CSS.

This can be particularly useful for:

• Landing pages

• SaaS applications

• Dashboards

• Marketing websites

• Portfolio websites

• UI components

Instead of downloading a large background image, you can sometimes create the visual directly in CSS.

Experiment with combinations

The real power of CSS gradients comes from experimentation.

Try changing:

• Direction

• Color stops

• Saturation

• Opacity

• Gradient type

• Number of colors

• Layering

A single color combination can produce dozens of different designs.

Once you understand linear, radial, and conic gradients, you have a surprisingly powerful design tool built directly into CSS.