DEV Community

Cover image for Add background blur with one line of CSS
Axorax
Axorax

Posted on

Add background blur with one line of CSS

#css #learning #webdev #frontend

Adding background blur to an element can make it more visually appealing and it's also REALLY use to do it. So, you might as well add it cuz why not? ¯\_(ツ)_/¯

The line of code you need 

backdrop-filter: blur(5px);
Enter fullscreen mode Exit fullscreen mode

Besides that, make sure that the element that will have a blurred background is not a solid color but is a bit transparent. And, ensure that the background of that element is not a solid color either.

Full code / Example

HTML

<h1>Subscribe to Axorax!</h1>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  background: url("./nature.jpg") no-repeat center center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  font-family: "arial", sans-serif;
}

h1 {
  padding: 1.5rem;
  border-radius: 10px;
  color: #ffffff;
  /* ↓ Important ↓ */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(5px);
}
Enter fullscreen mode Exit fullscreen mode

Preview Image

Thanks for reading! Have an amazing day! ✨

Top comments (0)