CSS Image Filters

CSS Filters

Visual effects such as blur and saturation reach elements through the CSS filter property.

It accepts these filter functions:

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

The CSS blur() Function

Elements are blurred by the blur() filter function, and the blur grows along with the value.

Without a value it falls back to 0, which has no effect.

Example

Two different strengths of blur on <img> elements:

Create an HTML page that applies different CSS blur filter effects to two images. The first image should have a 2px blur and the second a 6px blur using the CSS filter property.

> Output: complete HTML page

Prompt

Create an HTML page that applies different CSS blur filter effects to two images. The first image should have a 2px blur and the second a 6px blur using the CSS filter property.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Blur Filter</title>
<style>
#img1 {
  filter: blur(2px);
}

#img2 {
  filter: blur(6px);
}
</style>
</head>
<body>

<h2>CSS blur() Filter</h2>

<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>blur(2px):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>blur(6px):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS brightness() Function

How bright an element looks is controlled by the brightness() filter function.

0% turns the image completely black
Anything under 100% darkens the image
100% is the default and keeps the original brightness
Anything over 100% brightens the image

Example

One image rendered both brighter and darker than the original:

Create an HTML page that adjusts the brightness of two images using the CSS filter property. The first image should be brighter at 150% and the second darker at 50%.

> Output: complete HTML page

Prompt

Create an HTML page that adjusts the brightness of two images using the CSS filter property. The first image should be brighter at 150% and the second darker at 50%.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Brightness Filter</title>
<style>
#img1 {
  filter: brightness(150%);
}

#img2 {
  filter: brightness(50%);
}
</style>
</head>
<body>

<h2>CSS brightness() Filter</h2>

<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>brightness(150%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>brightness(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS contrast() Function

Raising or lowering the contrast of an element is the role of the contrast() filter function.

0% leaves the image completely gray
Below 100% the contrast drops
100% is the default and keeps the original contrast
Above 100% the contrast rises

Example

An image with its contrast pushed up, and again with it pulled down:

Create an HTML page that adjusts the contrast of two images using the CSS filter property. The first image should have increased contrast at 150% and the second decreased contrast at 50%.

> Output: complete HTML page

Prompt

Create an HTML page that adjusts the contrast of two images using the CSS filter property. The first image should have increased contrast at 150% and the second decreased contrast at 50%.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Contrast Filter</title>
<style>
#img1 {
  filter: contrast(150%);
}

#img2 {
  filter: contrast(50%);
}
</style>
</head>
<body>

<h2>CSS contrast() Filter</h2>

<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>contrast(150%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>contrast(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS drop-shadow() Function

To give an image a drop-shadow effect, reach for the drop-shadow() filter function.

Example

Two different drop-shadow effects on the same image:

Create an HTML page that applies different CSS drop-shadow filter effects to two images. The first should have a gray drop shadow (8px 8px 10px) and the second a lightblue drop shadow (10px 10px 7px).

> Output: complete HTML page

Prompt

Create an HTML page that applies different CSS drop-shadow filter effects to two images. The first should have a gray drop shadow (8px 8px 10px) and the second a lightblue drop shadow (10px 10px 7px).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Drop Shadow Filter</title>
<style>
#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}

#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}
</style>
</head>
<body>

<h2>CSS drop-shadow() Filter</h2>

<p>drop-shadow(8px 8px 10px gray):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>drop-shadow(10px 10px 7px lightblue):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS grayscale() Function

Turning an image gray is the job of the grayscale() filter function.

0% (or 0) leaves the image unchanged
100% (or 1) gives a completely grayscale image

Example

The same image at several levels of grayscale:

Create an HTML page that applies different grayscale filter effects to three images using the CSS filter property. Use values of 1, 60%, and 0.4 respectively.

> Output: complete HTML page

Prompt

Create an HTML page that applies different grayscale filter effects to three images using the CSS filter property. Use values of 1, 60%, and 0.4 respectively.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grayscale Filter</title>
<style>
#img1 {
  filter: grayscale(1);
}

#img2 {
  filter: grayscale(60%);
}

#img3 {
  filter: grayscale(0.4);
}
</style>
</head>
<body>

<h2>CSS grayscale() Filter</h2>

<p>grayscale(1):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>grayscale(60%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>grayscale(0.4):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS hue-rotate() Function

With the hue-rotate() filter function, the colors of an element rotate around the color circle.

Its value is the number of degrees to adjust the image by. At 0deg you see the original image, positive values raise the hue, and negative values lower it.

Example

The same image at several color rotations:

Create an HTML page that applies different hue-rotate filter effects to three images using the CSS filter property. Use values of 200deg, 90deg, and -90deg respectively.

> Output: complete HTML page

Prompt

Create an HTML page that applies different hue-rotate filter effects to three images using the CSS filter property. Use values of 200deg, 90deg, and -90deg respectively.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hue Rotate Filter</title>
<style>
#img1 {
  filter: hue-rotate(200deg);
}

#img2 {
  filter: hue-rotate(90deg);
}

#img3 {
  filter: hue-rotate(-90deg);
}
</style>
</head>
<body>

<h2>CSS hue-rotate() Filter</h2>

<p>hue-rotate(200deg):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>hue-rotate(90deg):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>hue-rotate(-90deg):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS invert() Function

Use the invert() filter function to reverse the colors of an image.

0% (or 0) leaves the image unchanged
100% (or 1) inverts the colors fully

Example

Three levels of color inversion on one image:

Create an HTML page that applies different invert filter effects to three images using the CSS filter property. Use values of 0.3, 70%, and 100% respectively.

> Output: complete HTML page

Prompt

Create an HTML page that applies different invert filter effects to three images using the CSS filter property. Use values of 0.3, 70%, and 100% respectively.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Invert Filter</title>
<style>
#img1 {
  filter: invert(0.3);
}

#img2 {
  filter: invert(70%);
}

#img3 {
  filter: invert(100%);
}
</style>
</head>
<body>

<h2>CSS invert() Filter</h2>

<p>invert(0.3):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>invert(70%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>invert(100%):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS opacity() Function

Making an element partly or fully see-through is what the opacity() filter function does.

0% (or 0) leaves the element completely transparent
50% (or 0.5) leaves the element 50% transparent
100% (or 1) leaves the element unchanged

Example

The same image at several levels of opacity:

Create an HTML page that applies different opacity filter effects to three images using the CSS filter property. Use values of 80%, 50%, and 0.2 respectively.

> Output: complete HTML page

Prompt

Create an HTML page that applies different opacity filter effects to three images using the CSS filter property. Use values of 80%, 50%, and 0.2 respectively.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Opacity Filter</title>
<style>
#img1 {
  filter: opacity(80%);
}

#img2 {
  filter: opacity(50%);
}

#img3 {
  filter: opacity(0.2);
}
</style>
</head>
<body>

<h2>CSS opacity() Filter</h2>

<p>opacity(80%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>opacity(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>opacity(0.2):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS saturate() Function

Color intensity, or saturation, is what the saturate() filter function adjusts on an element.

0% (or 0) removes the saturation completely
100% (or 1) leaves the element unchanged
200% (or 2) produces a super saturated element

Example

The same image at several levels of saturation:

Create an HTML page that applies different saturation filter effects to three images using the CSS filter property. Use values of 0, 100%, and 200% respectively.

> Output: complete HTML page

Prompt

Create an HTML page that applies different saturation filter effects to three images using the CSS filter property. Use values of 0, 100%, and 200% respectively.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Saturate Filter</title>
<style>
#img1 {
  filter: saturate(0);
}

#img2 {
  filter: saturate(100%);
}

#img3 {
  filter: saturate(200%);
}
</style>
</head>
<body>

<h2>CSS saturate() Filter</h2>

<p>saturate(0):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>saturate(100%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>saturate(200%):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>

The CSS sepia() Function

A sepia tone is a warmer, more brown/yellow color, and the sepia() filter function gives it to an image.

0% (or 0) leaves the image unchanged
100% (or 1) gives the full sepia effect

Example

The same image at several levels of sepia:

Create an HTML page that applies different sepia filter effects to three images using the CSS filter property. Use values of 1, 60%, and 0.4 respectively.

> Output: complete HTML page

Prompt

Create an HTML page that applies different sepia filter effects to three images using the CSS filter property. Use values of 1, 60%, and 0.4 respectively.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Sepia Filter</title>
<style>
#img1 {
  filter: sepia(1);
}

#img2 {
  filter: sepia(60%);
}

#img3 {
  filter: sepia(0.4);
}
</style>
</head>
<body>

<h2>CSS sepia() Filter</h2>

<p>sepia(1):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>sepia(60%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

<p>sepia(0.4):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">

</body>
</html>