CSS Academy · Lesson

filter: blur brightness contrast grayscale

Apply photographic filter effects to elements using the CSS filter property functions.

The CSS filter Property

The filter property applies graphical effects to elements — similar to Photoshop adjustment layers — without editing the actual image.

Applies a Gaussian blur. The argument is the blur radius.

.frosted {
  filter: blur(8px);
}

.hero-bg {
  filter: blur(3px) scale(1.05);
  /* scale prevents blurred edges from showing */
}