CSS Gradients: Dynamic Images from Code

Why it exists

Before CSS gradients, creating a smooth color transition required designing a raster image (like a PNG or JPG), exporting it, and loading it with the page. This added HTTP requests, increased page weight, and resulted in pixelation when resized or viewed on high-DPI screens. CSS gradients solve this by generating the effect directly in the browser from code.

The mental model

Treat a CSS gradient as a dynamically generated <image>, not just a background color. It's a set of instructions for the browser on how to draw a picture made of color transitions. Because it's an image, you can use it anywhere an image is valid, like background-image, border-image, or list-style-image.

How it works

You define a gradient using one of three main functions: linear-gradient(), radial-gradient(), or conic-gradient(). At a minimum, you provide two "color stops"—the colors you want to transition between. For example, linear-gradient(blue, pink) creates a vertical gradient from blue to pink. You can add more color stops and specify their positions. For linear gradients, you can also control the direction using keywords (like to right or to bottom right) or a specific angle (like 45deg).

When to use it

Use gradients for backgrounds on pages, containers, or buttons to add depth without the performance cost of an image file. They are excellent for hover states, creating subtle visual feedback. They are also perfect for creating simple patterns when combined with background-size and background-repeat.

When not to use it

Avoid using gradients for complex, photorealistic textures where a dedicated image file would be more appropriate. Overusing gradients or using too many jarring color combinations can make a UI feel dated or difficult to read. For simple, solid color backgrounds, just use the background-color property.

One canonical example

A common use is a subtle button background. A simple linear gradient can make a flat button feel more tangible. For example: background: linear-gradient(to bottom, #4A90E2, #357ABD);. This creates a vertical gradient from a lighter blue to a slightly darker blue, giving the button a slight 3D effect without any images.