HTML

How to create a blurry background image with CSS

Blur backgrounds are loved by websites developers. A blur image background will enhance the web page’s looks. With a blurred background, the user will easily differentiate other components on the page. Here we will learn to create blur background images with CSS.

Creating a blurry background image

The blurry background can be created using the CSS filter property. Add filter: blur to do so. Another CSS property to add blurred background images is backdrop-filter. Use backdrop-filter: blur to do so . But the backdrop-filter will not blur the whole background image instead it will blur the backdrop of foreground elements.

Example: Creating a blurry background image using a filter property

     body, html < height: 100%; >.container < position: relative; background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png"); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; filter: blur(8px); /* Adding blur background image */ >.text  
 
Blured background image
 
We have use filtered property for it
 
  

Output

Here is the output of the above program.

Example: Adding a blurred image with backdrop-filter

Here, we add backdrop-filter: blur( 5px) to blur the background of the element containing it. We have set the height to 100% whereas width to 50% of the parent container so that you can see the difference between both backgrounds.

Conclusion

In this tutorial, we have learned to add a blur background image with CSS. We used the filter property to make the entire background image blur. We can also use a backdrop filter to make only the specified regions blur.

Источник

backdrop-filter

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Try it

Syntax

/* Keyword value */ backdrop-filter: none; /* URL to SVG filter */ backdrop-filter: url(commonfilters.svg#filter); /* values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* Multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* Global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; backdrop-filter: revert-layer; backdrop-filter: unset; 

Values

No filter is applied to the backdrop.

Formal definition

Initial value	none
Applies to	all elements; In SVG, it applies to container elements excluding the element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	a filter function list

Formal syntax

backdrop-filter =
none |

=
[ | ]+

=
|
|
|
|
|
|
|
|
|

=
url( * ) |
src( * )

=
blur( ? )

=
brightness( [ | ]? )

=
contrast( [ | ]? )

=
drop-shadow( [ ? && ] )

=
grayscale( [ | ]? )

=
hue-rotate( [ | ]? )

=
invert( [ | ]? )

=
opacity( [ | ]? )

=
sepia( [ | ]? )

=
saturate( [ | ]? )

Examples

CSS

.box  background-color: rgb(255 255 255 / 0.3); backdrop-filter: blur(10px); > body  background-image: url("anemones.jpg"); > 

html, body  height: 100%; width: 100%; > .container  background-size: cover; align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; > .box  border-radius: 5px; font-family: sans-serif; text-align: center; max-width: 50%; max-height: 50%; padding: 20px 40px; > 

HTML

div class="container"> div class="box"> p>backdrop-filter: blur(10px)p> div> div> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 31, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Add a Blur Filter to the Background Image

In this snippet, you can find out how to apply a blur filter to the background image. It is very simple and fast!

Follow up the steps and create a blurred background image for your website.

Create HTML

• Begin by creating a element with a class of «image».
• Create another element with a class name «text». Here, also add , , and elements.

div class="image"> div> div class="text"> h1>W3DOCS h1> h2>Blurred Background Image h2> p>Snippet p> div>

Add CSS

• Add the link of the image with the background-image property.
• Set the height of the image with the height property, then specify the position of the image with the background-position property. Here, we set the «center» value.
• After applying the background-position , make the image not repeated by setting the background-repeat property to «no-repeat».
• Specify the background-size into «cover», which scales background image as large as possible to cover all the background area.
• Use the filter property to make our image blur. The filter property has the «blur» value, which applies blur on an image. It is specified in pixels. The larger the value, the more blur will be applied. We set it to «5px».

Do not forget to add -Webkit- for Safari, Google Chrome, and Opera (newer versions), -Moz- for Firefox, -o- for older versions of Opera with the filter property.

Here is what we have. We’re going close to the end!

.image < background-image: url("/uploads/media/default/0001/05/15552fb22caf79be6cc2c60b9a1afe9016889422.jpeg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); >

So, half of the work is done. Now, style the text by using the color, font-weight, border and other properties.

.text < color: #eeeeee; font-weight: bold; border: 3px solid #cccccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 80%; padding: 20px; text-align: center; >

Example of adding a blurred background image:

html> html> head> title>Title of the document title> style> body, html < height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; > h2 < font-size: 30px; > .image < background-image: url("/uploads/media/default/0001/05/15552fb22caf79be6cc2c60b9a1afe9016889422.jpeg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); > .text < color: #eeeeee; font-weight: bold; border: 3px solid #cccccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 20px; text-align: center; > style> head> body> div class="image"> div> div class="text"> h1>W3DOCS h1> h2>Blurred Background Image h2> p>Snippet p> div> body> html>

Result

W3DOCS

Blurred Background Image

Let’s see another example with the blurred background image.

Example of adding a blurred background image using the :checked selector:

html> html> head> title>Title of the document title> style> .background-image < position: fixed; left: 0; right: 0; z-index: 1; display: block; background-image: url(" /uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"); width: 1200px; height: 800px; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); > .content < position: fixed; left: 0; right: 0; z-index: 9999; margin-left: 20px; margin-right: 20px; color: #fff; > style> head> body> h2>:checked selector example h2> div class="background-image"> div> div class="content"> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta. p> p> Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula. p> div> body> html>

Источник

How to create clipped, blurred background images in CSS

In this tutorial, we’ll take a look at how to apply blur effects to images using CSS filters, and how to confine these effects to specific image areas.

By Sebastiano Guerriero Follow author on Twitter

A few days ago, we published the team component. It comes with a —blurred-img variation, where the area behind the team name is blurred. I thought it would be interesting to share the process of creating such an effect.

Let’s do this! #

I’ve put together a video tutorial that explains in details how to create the blur effect.

The component we build in this tutorial is based on the CodyHouse framework.

👋 First time you hear about the CodyHouse Framework?

The idea behind the effect is the following: we need to duplicate the image of the team member, then we have to apply the CSS blur filter to this copy and a mask so that only part of the image is visible.

We create a copy of the image in CSS using the ::before pseudo-element of the .team__caption element:

.team--blurred-img < .team__caption < overflow: hidden; &::before < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../../assets/img/img-01.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); transform: scale(1.1); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

By setting background-position: center bottom; and background-size: 100% auto; , we make sure the copy of the image overlaps perfectly the original team member image.

By targeting each team member card using their IDs, we can set a different image for each member.

.team--blurred-img < // . #james < .team__caption::before < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before < background-image: url('../../assets/img/img-04.jpg'); >> >

Because we’re targeting the .team__caption , the duplicated image is confined to that area, and we don’t need additional tricks to clip the image. Also, we’ve applied overflow: hidden to this element, to cut out the children elements in case they exceed the size of their parent.

When you apply the blur filter, you’ll notice the edges are semitransparent. We can fix this issue by creating an additional copy of the image using the ::after pseudo-element, and by increasing the size of the ::before element with the scale transformation:

.team--blurred-img < .team__caption < overflow: hidden; &::before, &::after < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); >&::before < transform: scale(1.1); >> #james < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-04.jpg'); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

Optionally, you can target browsers that support the backdrop-filter property, and use this alternative technique to create the same effect with just one line of code. Unfortunately, support is not great at the moment, so we decided to include both methods.

@supports (backdrop-filter: blur(10px)) < .team--blurred-img .team__caption < backdrop-filter: blur(10px); &::before, &::after < display: none; >> >

Done! Now go out there and blur things!

Cookie Compliance

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.

Источник