Interactive online courses HTML Academy
2026-03-09 10:57 Diff
https://htmlacademy.org/courses/advanced-styling/css-filters/css-filters-to-text

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Applying CSS Filters to Text

Filters may be applied without restrictions not only to images, but also to other HTML elements. Let’s try applying shadow and blur filters to the text of the captions.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Applying CSS Filters to Text</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image text"> <img src="img/spb-2.jpg" alt=""> <p>Savior on the Spilled Blood</p> </div> <div class="compare text"> <div class="compare-left blur"> <div class="image"> <img src="img/spb-1.jpg" alt=""> <p>St. Isaac’s Cathedral</p> </div> </div> <div class="compare-right shadow"> <div class="image"> <img src="img/spb-5.jpg" alt=""> <p>Trinity Cathedral</p> </div> </div> </div> </body> </html>

CSS

.blur p { } .shadow p { }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. Apply the blur filter with a value of 2px to the paragraph in the .blur block,
  2. and then apply a shadow filter with the value 2px 2px 2px black to the paragraph in the .shadow block.