Add background blur with one line of CSS

#css #webdev #learning #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);

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>

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);
}