Values and Units in CSS : Keywords, Strings and other text values : Images

Did you know CSS can create images without using a single file?

• CSS uses URLs to display images.

• image-set() serves images by device quality.

• Gradients generate images with colors only.

• Useful for backgrounds, designs, and responsiveness.

RECOMMENDED ARTICLES

Images

You can use images in many different ways: as backgrounds, as decorative elements, or even as patterns. When CSS sees an image value (written as <image> in the specs), it knows you’re pointing to something visual. 

At the simplest level, an <image> is just a URL that points to a picture file. But CSS can do much more than that. Modern browsers allow you to use different types of image values, each with its own purpose.

1. URL Images

This is the most common type: you simply give CSS the address of an image. 

Think of it like pasting a photo’s link into a message—you’re telling the browser “go fetch this file and display it here.” 

Example:

Here, coffee.jpg is stored in a folder called images, and CSS uses it as the page background.

2. Image Sets

Sometimes you want the browser to choose the best version of an image depending on the device. For example: 

A small, lightweight image for mobile phones.   

A high-resolution image for big desktop screens. That’s what image-set() does. It’s like giving the browser a menu of image options and letting it pick the one that makes sense. 

Example:

In this case:  

Phones with standard screens will download banner-small.jpg.  

High-resolution screens (like Retina displays) will grab banner-large.jpg for sharper quality.  

It’s very similar to HTML’s srcset attribute for <img>.

3. Gradients

Here’s where CSS gets creative: you can make images without using image files at all! 

A gradient is a smooth transition between two or more colors. CSS can generate these automatically, so you don’t even need a .jpg or .png. 

Think of it like mixing paint on a canvas:  

Linear gradients fade colors in a straight line (top-to-bottom, left-to-right, etc.). 

Radial gradients spread colors outward in a circular or oval pattern.  

Example:

 This creates a button with a warm orange-to-red fade.