safari css blur

Slider Revolution

More than just a WordPress slider

Creative Ways to Use CSS Blur Effect in Your Web Design

Discover top css blur effect examples to enhance your web designs. learn easy-to-implement techniques for stunning visual appeal..

Ever found yourself mesmerized by a sleek, subtle backdrop on a website that gently merges into the canvas of content? CSS blur effect —a powerhouse aesthetic in the world of web design effects —does just that. It’s the virtual equivalent of a soft morning mist, transforming stark, rigid lines into a dreamy, inviting interface.

Harness the transformative magic of CSS and elevate user experience to an art form. Dive into the myriad ways CSS3 effects blend function with finesse, creating a cohesive visual journey. Through this exploration, you’ll grasp how CSS filter properties wield the power to enchant—the Gaussian blurs to frosted glass illusions.

By the conclusion, the veil of complexity around implementing dynamic blurring will have lifted. Whether a seasoned front-end developer or a curious newbie, you’ll be armed with a swathe of practical CSS blur effect examples . Craft interfaces that not just capture attention but leave eyes lingering, craving more.

Awesome CSS Blur Effects

Claymorphism carousel, material ui slider, neon wordpress slider with text, optic shop showcase slider, css cool directional motion blur.

XYZt has done a great job in creating this HTML and CSS filter property.

Image Blur With a Soft Transition

This is a cross-browser blur that would work great on a website’s background image. It uses the SVG filter property for Firefox and CSS for Webkit. We owe this piece to Dudley Storey.

Blobby Background

Ted Kusio was able to create this blurred texture based on green and blue circles. The design is responsive and includes a texture on the top.

Subway-type Red Line

Carl Calderon brings this filter property based on a subway line from Stockholm.

Shifting Depth of Field

This option will look great on a solid background color. Thomas Trinca was able to imitate the color shifting of a camera lens . He uses keyframes and a cool CSS blur effect.

Design visually attractive and high-performing websites without writing a line of code

WoW your clients by creating innovative and response-boosting websites fast with no coding experience. Slider Revolution makes it possible for you to have a rush of clients coming to you for trendy website designs.

CSS3 filters on your background images

Check out bookcasey’s fine work. A blurry background image can highlight the headings or the site’s main content.

A blurry background image right behind an attractive layout where to place the heading. The user aadamski91 created a stunning blur effect with the possibility to resize the window.

Simple Blur Effect on a white background

Scott Dunham describes his work as “messing around” with a filter property and throwing in some parallax effect.

iOS 7 Header

A CSS filter blur for every browser like in iOS7. A fine work by Rik Schennink.

CSS3 filter animation

This type of blurred effect is very hard to achieve. Hence, developers can feel frustrated and irritated when trying to implement such a feature. However, this changed in 2018 as Dorian Nowak found this awesome solution. Implement this on a website and make your heading look amazing.

Backdrop filter

Ycw brings an easy solution for an fx without a backdrop-filter.

Pure CSS Blur with a Hover Effect

Mathew Craig wanted to see if he could apply a blur filter without affecting the overlay . He managed to do it by playing around with CSS filter blur options.

Blur effect with filter fallback and backdrop-filter

If you need to add a scroll feature, bind the event to backdrop. Follow Rplus’s advice to create this stunning blur effect.

Simple Blur

It’s amazing what you can achieve with a CSS filter. Here is one example by Michael Tempest. The overlay that you see on top is based on the same image. It has an SVG base64 mask of the original photo. With this, the developer creates a focused view. Such an approach is very useful if you want the viewer to focus on a particular element.

Blurring Out

A backdrop filter is a great tool for inserting a blurry background image. It’s great for blurring the background of a pop-up off-canvas menu. SitePoint has done a great job.

CSS Blur image cross browser

A filter for Firefox with a cross-browser effect. The author is Yudo.

Visitors usually like little surprises. Sometimes, designers can spread cool blur effect options across the page to surprise the user and create a superb experience for them. Click this button and you’ll see an original approach that provides visual feedback.

Bulanıklık efekti

Ayhan ALTINOK created this cool effect that will surely inspire you.

Jonas Sandstedt shows you the difference between a CSS option and an SVG example.

Intrinsic Ratio Blur

Apply a CSS filter blur to achieve this interesting effect on your background image. Congratulations to Charlotte Dann for a fantastic job.

Blurred Hover Effect – No jittering

Check out this CSS blurry background image by Alexander Flenniken.

Jay Holtslander brings this cool CSS blurred image.

Blurry impressive Background

There’s nothing like an iOS background image to showcase these blurred elements.

CSS blur effect

This effect’s author is hchiam

Pure motion

Here is how to use an element in motion. Karlo Videk created this animation based on one single element.

Frosted Glass Effect for a Form

This example by Usama Tahir will make your forms look impressive.

CSS Blur Effect

Shahid Khan brings us this colorful screen blend.

Canva’s blur effect

Sam Woolerton is the author of this cool effect from the source code.

CSS – Background with Blur

A simple image with a stylish blurred background. The author is Tiago Dias.

Hover effect

By learning CSS you can put together functional and stunning effects. Designs that are based on CSS are lighter than the ones made on graphics.

CSS blur effect with button overlay

A blurred background image with a button.

Text Over Any Background

Chris Smith provides both contrast and brightness in this example. He lowered the contrast by 70% so that the viewer could read the title easily.

In this case, the author is vaibhav-lone.

Blurred text with only CSS only

Adam Ruf decided to explore new ways of applying a CSS blur effect. In this case, the text shadow covers only some parts of the paragraph. You can achieve a backdrop filter on the image if you use 100% width and height.

Three blur effects in a row on images.

Blur with CSS & SVG

Vincent De Oliveira created this progressive blur.

CSS Blur Effect Test

Marius brings us this blurry background with an impressive color selection.

In/out of focus

Are you looking for some text effects? Jonny Scholes brings an example that’s easy to implement, even for beginners. These examples are excellent for acquiring experience fast.

Focus Circle

Andy created this unique effect.

Lightbox with zoom & blur effect

A workaround for vertical videos filling the remaining space with their blurred versions.

Blur Buttons

Natalie Frecka combined more blur than you can imagine with a hovering effect.

CSS blur effect hover card

In this case, the author is Ankit Srivastava

Draggable blur mask over image

A job well done by marcruecker.

A nice effect over a long text.

Bokeh Pattern

Owlypixel is the author of this blur which reminds us of the Bokeh-style.

Css blur effect

Gabriel Pizarro Correa did a neat job with this effect.

A blurred overlay

Any Gaussian function or CSS blur effect looks better if the designer inserts his/her personal touch . Glenn Reyes manages to give an artistic touch that looks great on Internet Explorer or any other browser.

Maria placed the word “love” on a red background.

CSS Filters

Sam Jarvis uses the blur smartly on two circles with overlapped sections.

Check out the work of ManuTheCode.

Loading Animation CSS

You can achieve an effect like this using only CSS.

Text blurring animation

Andrew Burton uses tex shadow and CSS3 animations to achieve this cool effect.

Pure CSS Text Blur

If you’re looking for a solution that’s easy and that has a short learning curve, check out this example.

Rollover CSSS Blur Filter Image Gallery

Make your background beautiful with an effect like this. It’s triggered by the mouse movements which provides an awesome user experience.

FAQ on CSS blur effects

How do i implement a css blur effect on an image.

To conjure that ethereal look on an image, employ the  filter  property with  blur . Picture this:  filter: blur(5px); . Five pixels is often your sweet spot for a gentle haze. It melds your image into the background just enough without losing its soul.

Can I apply a CSS blur effect to text?

Absolutely, text isn’t immune to the blur’s charm! Adopt the same  filter: blur(2px); —tone down the radius; you want the words dreamy, not illegible. A dash of blurring breathes life into static text, giving it a soft, mysterious whisper.

What’s the deal with CSS blur effect not working in some browsers?

Ah, the cross-browser conundrum! Not all browsers are on speaking terms with  backdrop-filter  or  filter . A surefire workaround? Prefixes. Yes,  -webkit-filter: blur(5px);  should play nice with the rebels—looking at you, Safari and Chrome.

Is there a way to animate a CSS blur effect?

Animation and blur, a match made in heaven! Transition your element from crystal clarity to a gentle fog with  transition: filter 0.5s ease-in-out; . Follow this with a hover effect that brings  filter: blur(4px);  onto the stage. Watch it sweep over your content like a delicate dance.

How does CSS backdrop-filter differ from filter with blur effects?

Think of  backdrop-filter  as the cool cousin to  filter . It won’t just blur what it’s directly applied to; it blurs all the fiesta happening  behind  the element—a real frosted glass affair.  filter ? It deals only with the element it’s attached to; a more selfish operator.

Can CSS blur effect impact website performance?

True story, the mystical blur is a bit of a diva when it comes to resources. Heavy use, especially with animations, can make your website performance take a hit—think heavier page loads and a tad bit of lag. Moderation is key, don’t let the blur blur your performance!

Are there CSS blur effect limitations on mobile devices?

Your handheld marvels prefer to keep things light and breezy. Beware,  backdrop-filter  may throw a fit on some mobile platforms. It’s like squeezing into a tight suit; it’s not for every device. Test, tweak, and maybe keep it desktop-centric if the blur throws a tantrum.

Can we create color blur effects using CSS?

Why stop at a smoky silhouette when you can dip your blur into a  kaleidoscope ? Glide  filter: blur(10px)  hand in hand with  background-color: rgba(255, 0, 0, 0.5); —now watch as the hues blur into a sunset, painting the sky with shades you never knew were possible.

Is it possible to blur only part of an element with CSS?

Definitely! It’s like placing a translucent curtain over a section of your content. Wrap the portion you desire in a pseudo-element. Now, let  backdrop-filter: blur(8px);  rain down. It’s selective blurring at its finest, proving that sometimes, focusing on just a fragment can create a masterpiece.

How do I remove CSS blur effect on hover?

A game of now you see me, now you don’t. Start with elusiveness:  filter: blur(4px); . Now, conjure the clarity on hover:  :hover { filter: none; } . Like a morning fog lifted by the sun’s first rays, you reveal the crisp truth beneath the blur’s vanishing act.

We’ve danced through the  foggy realms  of web design, where the  CSS blur effect examples  laid out here are more than mere visual treats; they’re storytellers, setting the mood, guiding emotions, offering an almost tangible texture to your digital canvas. With  CSS3 effects  and  filter properties , layers of sophistication are at your beck and call, transforming blunt visuals into softened whispers that invite users to a more immersive experience.

• Dynamic blurring  slides into your toolkit with grace.
• Frosted glass effects  lend that chic finish.
• Responsive design blur  ensures elegance on every screen.

And while you juggle  front-end development techniques , never lose sight of what’s beyond the blur—a clear, accessible, user-focused interface. Craft with intention, blur with a purpose, and leap boldly into this mistscape of design, where beauty and performance waltz in harmony. Here’s a toast to the whispers of design that speak volumes, to the blur that sharpens focus on what truly matters—user connection.

If you liked this article about CSS blur effects, you should check out this article about CSS animation libraries .

There are also similar articles discussing cool CSS buttons , CSS shadow effects , CSS blockquotes , and CSS charts .

And let’s not forget about articles on CSS headers , CSS parallax effects , CSS animations on scroll , and CSS page transitions .

FREE: Your Go-To Guide For Creating Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

Slider Revolution high priest on the mission to find the line between not enough coffee and just a little too much coffee. Same with beer.

For any inquiries or additional resources related to this blog post or else, please don't hesitate to comment below or email me at [email protected] .

Liked this Post? Please Share it!

One thought on “ Creative Ways to Use CSS Blur Effect in Your Web Design ”

This is awesome! a full list of blur effects and they are pretty easy to apply!!! Thank you Dirk!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

From The Blog

Enhance your website: top javascript slider libraries, bring your site to life with wordpress animation plugins, the best video plugins for wordpress: 16 examples, popular resources, optimizing load speed and performance, quick setup – slider revolution, create a basic responsive slider, get productive fast.

Join over 35.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.

Privacy Overview

Today I Learned

How to fix filter: blur() performance issue in safari.

The filter: blur() property in css may come in handy in some situations, but you should know of a side effect it has in Safari (tested on version 15.1 as of this writing).

The issue is a nasty performance drop around the element on which the filter is used, making every other interaction extremely slow. And it happens in Safari only. In other browsers everything works well.

One solution I've found so far is to use transform: translate3d(0, 0, 0) along with filter on the same element, to force the browser use GPU acceleration for that particular element instead of the CPU.

Blur menu on safari

How to make navbar section like this with blur in safari!?

https://www.dropbox.com/s/35opzry64hm6byc/Screen%20Shot%202017-08-08%20at%2012.43.49%20PM.png?dl=0

you can view original url :

https://www.apple.com/ipad-pro/

Best regards

This can be achieved only on Safari only (on macOS/iOS) with filter property and is not available for Chrome, Firefox, Edge, Internet Explorer, Opera or Vivaldi.

You can try adding:

And hope that support will be coming and it would work soon in others as well.

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

The syntax is:

There are a number of functions to use for the value:

brightness()

Drop-shadow(), grayscale(), hue-rotate().

• url() – for applying SVG filters
• custom() – “coming soon”

Multiple functions can be used, space separated.

Filter Functions

To use the CSS filter property, you specify a value for one of the following functions listed above. If the value is invalid, the function returns “none.” Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).

Here’s a demo that lets you play with individual filters a bit:

Converts the input image to grayscale. The value of “amount” defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Converts the input image to sepia. The value of “amount” defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0 leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Saturates the input image. The value of “amount” defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values over 100% are allowed, providing super-saturated results. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Applies a hue rotation on the input image. The value of “angle” defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the “angle” parameter is missing, a value of 0deg is used. The maximum value is 360deg .

Inverts the samples in the input image. The value of “amount” defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

Applies transparency to the samples in the input image. The value of “amount” defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the “amount” parameter is missing, a value of 100% is used. This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance. Negative values are not allowed.

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the “amount” parameter is missing, a value of 100% is used.

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values over the amount over 100% are allowed, providing results with less contrast. If the “amount” parameter is missing, a value of 100% is used.

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed.

This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

Drop-shadow also mimics the intended objects outline naturally unlike box-shadow that treats only the box as its path.

Just like with text-shadow , there is no ‘spread’ parameter to create a solid shadow larger than the object.

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Here’s a tutorial that works as a nice intro to SVG filters with a fun demo.

Animating Filters

Since Filters are animatable it can open the doors for a whole bunch of fun.

You may combine any number of functions to manipulate the rendering, but order still matters (i.e., using grayscale() after sepia() will result in completely gray output).

A computed value of other than “none” results in the creation of a stacking context the same way that CSS opacity does. The filter property has no effect on the geometry of the target element’s box model, even though filters can cause painting outside of an element’s border box. Any parts of the target element are affected by filter functions. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants. Filters can also be applied to inline content, such as individual text spans.

The specification also introduces a filter(image-URL, filter-functions) wrapper function for an image. It would allow you to filter any image at the time you use it within CSS. For example, you could blur a background image without blurring the text. This filter function is not yet supported in browsers. In the meantime, you can apply both the background and the filter to a pseudo-element to create a similar effect.

The IE proprietary filter stuff

Also used the filter property, like:

Mostly used for opacity when you needed to support IE 8 and down.

More Information

• W3C Filter Effects Specification
• Bennett Feely’s Filters Gallery
• CSS Filters polyfill
• Understanding CSS Filter Effects

Browser Support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

I am so amazed with the work of you people.

I live in India and i had just started my web designing carrier so there are many things which i don’t know and I always need help on that and every time i search for a thins which i don’t know i found it on this website.

Thanks Thanks Thanks for your great work.

This website is doing amazing thing for all the people who cant afford to get costly online education and lave lack of tome and resources mainly i don’t have time,money, and mostly resources too but with the help of services like this i am approaching to goog web Designer carrier.

If your website need any help i am there to support you

My mail id [email protected] Facebook striker.a.a.a

Keep up your Amazing work

yepp, its a great-great website.

The animation is NOT working at all on Firefox 46.0.1. Any ideas? Cheers…

Hey, you just have to change code from -webkit- to without that (or add new lines without -webkit-). Like that:

And then it will work on Mozilla. Chris just write the code only for Chrome and Safari.

Thanks for the tutorial.

I noticed that the table said that firefox isn’t supported.

I’ve come across this:”-webkit-filter: blur(20px);”. Wouldn’t the effect then work in firefox?

-webkit- only affects Chrome, Opera (15+) and Safari. You can do filter stuff in Firefox with svg though.

It’s now supported under Firefox without vendor prefixes. :)

-webkit only affect with Chrome,Safari Etc. Browser

if you are going to use it with firefox , you may try -ms-filter:

Actually, you need to use -moz for firefox. -ms is for Microsoft Internet Explorer

Hi, using this article and the explication in spanish for @kseso i made this demo: http://codepen.io/g3kdigital/pen/cxCvu i show how to change the color of the tag using only css and filters , but only working in -webkit- for now. Cheers.

Very nice use case.

that is one stunning example of filters.

Found that you wrote:

Where is one of:

Checked source code, you got wrapped around it.

Anyways just saying :D

for firefox you just have to change -webkit with -moz

-moz-filter:grayscale(1);-webkit-filter:grayscale(1);

For your Reference (CMIIW) css prefixs:

-khtml- (Konqueror, really old Safari) -moz- (Firefox) -o- (Opera) -ms- (Internet Explorer) -webkit- (Safari, Chrome)

Firefox prefix -moz- does not work. You must use

Interestingly it works in the new Firefox Developers Edition (so hopefully full support is on it’s way – caniuse suggests v35 will have full support without a vendor prefix).

I just put:

” filter: opacity(.2); ”

Without “-webkit-filter: opacity(.2);”

Works fine in Firefox Developer Edition “36.0a2 (2014-12-10)”.

Thanks for nice tutorial, its crisp :D

Awesome :D!!! thanks

Minor Correction: You haven’t included “saturate” within the list mentioned right at the top.

Thanks. Fixed.

Thanks for the helpful tips. My client wants sepia tone over the photos of their homepage, nice to know I can let the css convert the images on the fly.

Wow!!! So good to see it working on my favourite browser: Mozilla Firefox!!! I’m seeing it on FF Dev Edition, it’s great to have it here too! :) :) :)

Awesome with a capital “A”!!!!

Hey christ , i dont know if is just mu issue or internet coneccion but the codepen embeed examples are not displaying or when they do is just half. Maybe you want to take a look

Cheers and btw great article

I recently had to make blue colored png icons white on hover.

I used the following to achieve this and thought someone else mind find it useful.

Thanks Justin – just what I needed.

If it’s an svg icon loaded in, or with some PNGs you could also do: filter: contrast(0) brightness(200%);

Glad it worked for you.

Justin! You have saved me tons of work… Although I did go through hell to find your little snippet ;-)

Thank you thank you thank you.

My pleasure!

Let me know if you come across any cross-browser issues with that hack.

Thank you so much for this! It was exactly what I was looking for. I’ve been trying to find a way to fade my background-image to a black without having to put my image in the tag in the HTML for hours. I was about to give up and go to sleep when I came across this. Now I probably won’t be sleeping because I’m too excited!

Thank you for the tutorial.

I was under the impression that vendor prefixes are not needed to use filters in CSS. It does not seem to be so as when I use just

filter: blur(5px);

for an image the image is unchanged but when I use

-webkit-filter: blur(5px);

Therefore is it correct to assume that vendor prefixes are still needed?

Thanks in advance.

But, i find this css does not valid in css validator. Is there any solution can help to make this to be validated properly?

Your example images path/URL/src is missing. :)

Noticed that as well. When you click the the ‘Edit on Codepen’ link it works. Weird.

The image has hotlinking protection for some domains, it seems.

css only animation start button: http://codepen.io/anon/pen/JGYqgq

how do I apply the filter on the bgImage but not effect the text on top ?

The only way of doing this would be to seperate the text and background container and then put the text absolute on top of that container:

cool stuff.. There is a filter which makes my picture sharper?

Is it possible to apply filter to only a selection? e.g, invert black pixels to white, etc. I really need help on this asap please.

Hi, I’ve playing with this filters… weird thing is when I was trying to make images white, only the ones on tittle were affected. Not sure why…

Hello I want background as a filter blur and whatever text on up it need to normal. Please any one suggest me solution.

The backdrop-filter CSS property

I just stumbled upon one bug.

If you use filter on the parent element of a fixed positioned element. Your Position fixed won’t work.

URL with ID based filter not working in Firefox, any solution for it?

For example, check your link: https://codepen.io/grayghostvisuals/pen/noItd in firefox browser.

Any idea when filter: custom() feature will be supported by browsers? Till then is there any way to use svg to apply custom shaders?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

20 CSS Blur Effects

Welcome to our article showcasing a curated collection of CSS Blur Effects ! In this compilation, we have gathered an assortment of free HTML and pure CSS code examples sourced from platforms like Codepen, Github , and other valuable resources. This collection serves as a comprehensive guide for web designers and developers seeking to incorporate captivating blur effects into their projects.

With the power of CSS, you can effortlessly add depth, focus, and a touch of elegance to your web designs. Whether you're aiming for a subtle and refined effect or a bold and eye-catching visual, these blur techniques will undoubtedly elevate the aesthetics of your website.

As of February 2024 , we are thrilled to present an update to our collection , featuring four brand new items . These additions reflect the latest trends and advancements in CSS blur effects, ensuring that you have access to the most cutting-edge techniques available.

By exploring this collection, you will discover a diverse range of blur effects, each accompanied by its respective code example. This allows you to easily implement these effects into your own projects, regardless of your level of expertise. Whether you're a seasoned developer or just starting out, this collection offers inspiration and practical solutions for all.

So, join us as we delve into this compilation of CSS blur effects, sourced from various platforms and updated with four exciting new additions . Unleash your creativity and transform your web designs with these mesmerizing blur effects, adding a touch of magic and allure to your online presence.

A Draggable Popup with Backdrop Blur in HTML & CSS

The HTML structure is quite simple, with a div element having a class of popup and an h1 tag inside it. The box-shadow and backdrop-filter properties are used to create a blur effect behind the popup. The mask property is used to create a gradient effect. The JavaScript makes the popup draggable using the jQuery UI’s draggable function. It also uses the Knobs library to create interactive knobs that allow the user to adjust the shadow size, blur size, and blur strength of the popup. Dependencies: jquery.js, jquery-ui.js, knobs.js.

• demo and code

Quote Effect using a CSS Blur Filter

The quote is broken down into individual span elements for each word or punctuation mark. Each span contains data attributes specifying the duration , delay , and blur amount for the animation. Specific styles are applied to animate the span elements from a blurred state to clear text. A JavaScript function animate() iteratively applies animation styles to each word based on its data attributes. After all words are animated, they return to their initial state and the animation repeats. Dependencies: tweenmax.js.

Dynamic Background Image with CSS Blur Effect

This code snippet is a great example of how CSS can be used to create visually appealing effects on web pages. The combination of a dynamic background image with a blur effect and animation can make a webpage more engaging and visually interesting. The div.bg-image is used to display the background image, while the div.bg-blur is used to create the blur effect. The .bg-blur class applies a blur effect to the background image. It uses the backdrop-filter property with a saturate(180%) blur(20px) value to increase the color saturation and apply a blur effect. The rgba(138, 42, 10, 0.25) value sets a semi-transparent dark overlay on the image. The .bg-blur class also includes a CSS animation named fade . This animation gradually changes the opacity of the div.bg-blur from 0 to 1 , creating a fading effect. Responsive .

Smooth Blur

The div element is styled to have a width of 50vmin and an aspect ratio of 1/1 , making it responsive and square-shaped. It has a border-radius of 2rem , giving it rounded corners. A box-shadow is applied for a subtle lifting effect. An ::after pseudo-element with a backdrop-filter is used to create a blur effect. The image inside the div is positioned absolutely and scaled to cover the entire div with some overflow, ensuring it fills the container while maintaining its aspect ratio.

• yoichi kobayashi
• April 24, 2022
• HTML / CSS (SCSS)

About a code

Animated css filter blur.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

• December 30, 2019

CSS Directional Motion Blur

Motion/directional blur in pure HTML/CSS with the use of filter:blur and inverse scaling on parent and child.

Responsive: yes

• November 9, 2019
• HTML (Pug) / CSS (Stylus)

Blurred Video Effect with CSS filter

• Thomas Trinca
• July 13, 2016

Shifting Depth of Field

A demo intended to mimic the shifting depth of field of a camera lens using blur filters and keyframes.

• Karlo Videk
• May 7, 2016

Pure CSS Motion Blur

CSS keyframes animation of a ball with motion blur. Animation made with only one element.

• May 2, 2016

Blurred, Invisible Ink, and Redacted Text

Exploring some ways of visually hiding or obscuring text with CSS filter s and pseudo-elements.

Dependencies: bootstrap.css

• Natalie Frecka
• December 13, 2015
• HTML (Pug) / CSS (SCSS)

Blur Buttons

Buttons blur on or un-blur on hover.

• Tatsuya Azegami
• October 29, 2015

Loading Animation CSS

Text blur animation CSS only.

• Glenn Reyes
• September 10, 2015

A Blurred Overlay

• Jonny Scholes
• May 23, 2015

In/Out of Focus Text Effect

• Andrew Burton
• December 2, 2014

Text Blurring Animation

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

• October 24, 2014

Hover Effect Blur

• Derek Peruo
• April 16, 2014

Pure CSS Text Blur

A simple text blur effect using pure CSS.

• sjmcpherson
• May 3, 2013
• HTML (Haml) / CSS (Less)

Rollover CSS Blur Filter Image Gallery

Utilizing CSS transition s & transform s and the CSS blur filter .

• April 19, 2013

I LOVE BLUR

• Dudley Storey
• July 28, 2012

Cross-Browser Image Blur With Transition

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Several functions , such as blur() and contrast() , are available to help you achieve predefined effects.

With a function, use the following:

You can use url() to reference an SVG filter element . For a reference to an SVG <filter> element, use the following syntax:

The filter property is specified as none or one or more of the functions listed below. If the parameter for any function is invalid, the function returns none . Except where noted, the functions that take a value expressed with a percent sign (as in 34% ) also accept the value expressed as decimal (as in 0.34 ).

When the filter property values contains multiple functions, the filters are applied in order.

Applies a Gaussian blur to the input image.

Applies a linear multiplier to the input image, making it appear more or less bright. Values are linear multipliers on the effect, with 0% creating a completely black image, 100% having no effect, and values over 100% brightening the image.

Adjusts the contrast of the input image. A value of 0% makes the image grey, 100% has no effect, and values over 100% create a contrast.

Applies the parameter <shadow> as a drop shadow, following the contours of the image. The shadow syntax is similar to <box-shadow> (defined in the CSS backgrounds and borders module ), with the exception that the inset keyword and spread parameter are not allowed. As with all filter property values, any filters after the drop-shadow() are applied to the shadow.

Converts the image to grayscale. A value of 100% is completely grayscale. The initial value of 0% leaves the input unchanged. Values between 0% and 100% produce linear multipliers on the effect.

Applies a hue rotation. The <angle> value defines the number of degrees around the hue color circle at which the input samples will be adjusted. A value of 0deg leaves the input unchanged.

Inverts the samples in the input image. A value of 100% completely inverts the image. A value of 0% leaves the input unchanged. Values between 0% and 100% have linear multipliers on the effect.

Applies transparency. 0% makes the image completely transparent and 100% leaves the image unchanged.

Saturates the image, with 0% being completely unsaturated, 100% leaving the image unchanged, and values of over 100% increasing saturation.

Converts the image to sepia, with a value of 100% making the image completely sepia and 0% making no change.

Combining functions

You may combine any number of functions to manipulate the rendering. The filters are applied in the order declared. The following example enhances the contrast and brightness of the image:

Interpolation

When animated, if both the beginning and end filters have a function list of the same length without url() in the same order, each of their filter functions is interpolated according to the filter function's specific rules.

If the filter lists are of different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list. The added functions use their initial, no filter modification values. All the filters listed are then interpolated according to the filter function's specific rules. Otherwise, discrete interpolation is used.

Formal definition

Formal syntax, applying filter functions.

The filter property is applied to the second image, greying and blurring both the image and its border.

Repeating filter functions

Filter functions are applied in order of appearance. The same filter function can be repeated.

The filters are applied in order. This is why the drop shadows are not the same color: the first drop shadow's hue is altered by the hue-rotate() function but the second one is not.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• CSS backdrop-filter property
• CSS compositing and blending module, including the CSS background-blend-mode and mix-blend-mode properties.
• The CSS mask property
• SVG , including the SVG <filter> element and SVG filter attribute.
• Applying SVG effects to HTML content

CSS Backdrop Filter

Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.

• 4 - 46 : Not supported
• 47 - 75 : Disabled by default
• 76 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 12 - 16 : Not supported
• 17 - 18 : Supported
• 79 - 122 : Supported
• 3.1 - 8 : Not supported
• 9 - 17.3 : Supported
• 17.4 : Supported
• TP : Supported
• 2 - 69 : Not supported
• 70 - 102 : Disabled by default
• 103 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 9 - 33 : Not supported
• 34 - 63 : Disabled by default
• 64 - 107 : Supported
• 108 : Supported
• 5.5 - 10 : Not supported
• 11 : Not supported

Chrome for Android

• 122 : Supported

Safari on iOS

• 3.2 - 8.4 : Not supported

Samsung Internet

• 4 : Not supported
• 5 - 11.2 : Disabled by default
• 12.0 - 22 : Supported
• 23 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Not supported

Firefox for Android

• 14.9 : Not supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Not supported
• 3 : Not supported

CSS Reference

Css properties, css filter property.

Change all images to black and white (100% gray):

Tip: More "Try it Yourself" examples below.

Definition and Usage

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Advertisement

Tip: To use multiple filters, separate each filter with a space (See "More Examples" below).

Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

More Examples

Blur example.

Apply a blur effect to the image:

Blur Example 2

Apply a blurred background image:

Brightness Example

Adjust the brightness of the image:

Contrast Example

Adjust the contrast of the image:

Drop Shadow Example

Apply a drop shadow effect to the image:

Grayscale Example

Convert the image to grayscale:

Hue Rotation Example

Apply a hue rotation on the image:

Invert Example

Invert the samples in the image:

Opacity Example

Set the opacity level for the image:

Saturate Example

Saturate the image:

Sepia Example

Convert the image to sepia:

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important (i.e. using grayscale() after sepia() will result in a completely gray image):

All Filters

A demonstration of all filter functions:

Related Pages

CSS Tutorial: CSS Images

HTML DOM reference: filter property

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.