{}
menu
navigate_next
John Itebu
Designer / Afrocentrist / Liberal
Contact me

remove_red_eyeReading Mode
bookmark_borderBookmark link
more_vert
arrow_back
CSS trick to blur text
#CSS3  #Trick  #Blur  #Design  #User Interface
design - 09/21/2017

If you ever wanted an SEO friendly solution to blur text, there are a number of ways to do so. One way you'll most likely use is a CSS3 filter with the blur function like the example below.

This works fine. But you must also know the compatibilty issues that exist with using CSS FIlter.

Browser support for CSS3 filter
Browser support for CSS3 filter. Source
Although a strong case can be made for this in the sense that it has a wider range of use. You can use this to blur images or any kind of content really. But for blurring text, we'll consider another method.

There is a hack/trick which you can use to achieve a similar blur effect for text content using a combination of color and text-shadow CSS properties with better browser compatibility. Reference the example below

 


Better compatibility with text-shadow Source.

The idea here is make the color transparent and use a color having relativley high contrast with the background for the text-shadow property. It then creates the illusion of blurring. You can see another sample below using dark background instead.
 

 


commentsComments


New Message
close
From
done
clear
Subject
text_format
delete
close
Change your name
Please enter a valid name :)
share