ImagesLesson 79Free preview

Blur Background Image

This lesson is part of How To · All levels

Summary

Blur background image blurs the background image to make the text on top of it stand out. The blur effect should be applied to separate layers, rather than to text containers, so that the writing remains sharp. A slightly larger scale on the image layer prevents the blurred edges from being seen at the corner.

Key points

Filter: blur(8px) blurred the background image elements.
Put the text in different layers so it doesn't get lost.
Transform: scale(1.05) or negative inset covers the transparent edge due to blur.
The z-index sets the content above the background layer.
Backdrop-filter: blur() is an alternative to blurring the area behind the panel.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.