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

Thanks for reading! Have an amazing day! ✨

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.