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
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
Playing with CSS Filters.
Frosted Glass Effect – Form
Text blurring animation
Worked great for me. I’m using it with WebKit on iOS and Android devices.