21 Stunning CSS Image & Text Effect Blur Examples

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

CSS Filter Cards


Subway – Red Line

Tiny simple dropdown.


Cross-Browser Image Blur With Transition

Cross-browser blur for images: CSS filters for Webkit, MS proprietary code for IE 8 and earlier, SVG filter for Firefox.


Full bleed background images with CSS3 filter

Full bleed background images with CSS3 filter


SVG Filters for text

Inspiration came straight out of this article


Backdrop

An easy way to implement backdrop fx with backdrop-filter


Dynamic Inside Blur Pure CSS

Complementary of the pen dinamic OUTSIDE blur


CSS3 blur filter animation

CSS3 blur filter animation


Intrinsic Ratio Blur

With a css filter, viewport lengths and calc()  Potential header for http://themes.pouretrebelle.com/


Recreating Canva’s blur effect from source code

Recreating Canva's blur effect from source code


Text Over Any Background

Brightness and contrast on the background dropped to 70 percent to keep the text easy to read over any image. Ideal for using with user defined images.


Progressive blur with CSS & SVG

Progressive blur with CSS & SVG


I Live BLUR

A very old CSS experiment now on CodePen.


Lightbox with zoom & blur effect

Inspired on some vertical videos that fill the remaining space with a blurred version of the video. I thought it was a nice workaround.  It would be ni


Draggable blur mask over image

Draggable blur mask over image


CSS Variables w/ JS

Updates CSS variables with ES6. Change the color of the text and picture frame as well as adjust the blur of the image.


Bokeh Pattern

My attempt to create something close to the Bokeh-style, out of focus, blurred  image.


Playing with CSS Filters.

Using contrast to posterise the image, in turn rounding the overlapped blurred regions of the two circles to a block colour.


Blurry Background

Something like the iOS background blurring effect for UI elements


Frosted Glass Effect – Form

Frosted Glass Effect - Form


Text blurring animation

Text animates in from being blurred to crisp and out again. Uses CSS3 animations and text-shadow.


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.