CSS filters can be used to alter the way in which an image is rendered. It is an cool CSS feature that allows you to apply a filter to the background of an element. It can be also be combined with CSS animation to create some eye-catching effects and add life to an element which has traditionally been static. So in this post we`ve collected 22 Stunning CSS Image & Text Effect Blur Examples that could be great ideas to use in an upcoming project or learning a new trick in the quest to do more with front end.

CSS Filter Cards

---

Subway – Red Line

---

Cross-Browser Image Blur With Transition

---

Full bleed background images with CSS3 filter

---

SVG Filters for text

---

Backdrop

---

Dynamic Inside Blur Pure CSS

---

CSS3 blur filter animation

---

Intrinsic Ratio Blur

---

Recreating Canva’s blur effect from source code

---

Text Over Any Background

---

Progressive blur with CSS & SVG

---

I Live BLUR

---

Lightbox with zoom & blur effect

---

Draggable blur mask over image

---

CSS Variables w/ JS

---

Bokeh Pattern

---

Playing with CSS Filters.

---

Blurry Background

---

Frosted Glass Effect – Form

---

Text blurring animation

---