Home  »  CodeSnippets   »   CSS Blur Text Examples

CSS Blur Text Examples

Posted: February 7, 2022 | by Michael Bright

.mydiv { 
   filter: grayscale(50%) blur(8px);
   -webkit-filter: blur(8px);
}

Blur an image CSS:

img {
   filter: grayscale(0.5) blur(10px);
}

Blur some text in CSS:

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.