You can use the backdrop-filter property in CSS to blur the background image behind an element with a transparent background:
.background {
background-image: url(castle.jpg)
}
.backdrop {
backdrop-filter: blur(1);
}Copied to clipboard!
It applies to everything behind the element where the backdrop-filter is defined, therefore make sure you make the element at least partially transparent in order to see the result. This property is often used to blur out the background behind a popup.
Also, this not only works with blur, but with other filter functions as well.
.backdrop {
backdrop-filter: brightness(50%);
backdrop-filter: contrast(50%);
backdrop-filter: drop-shadow(0 0 5px #000);
backdrop-filter: grayscale(100%);
backdrop-filter: hue-rotate(90deg);
backdrop-filter: invert(100%);
backdrop-filter: opacity(50%);
backdrop-filter: sepia(100%);
backdrop-filter: saturate(100%);
}Copied to clipboard!
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
