Little Coding Things

Tag: backdrop-filter

  • Grayscale Backdrop Filter: What It Is and How to Use It

    Grayscale Backdrop Filter: What It Is and How to Use It

    Hello there! 😃 In CSS, we have a really helpful property called backdrop-filter. It’s like a special filter that applies grayish shades to the backgrounds. A useful tool when we want to focus on a part of the webpage without changing the actual element itself. Mm… 🤔 that is a little bit tricky! Isn’t it? Let’s grab a cup of coffee ☕ and move forward! We will clarify everything in this post about using a grayscale backdrop filter. 👩‍💻

    How the backdrop filter works

    So, how does this property really work? We will begin by setting the backdrop-filter property to grayscale(percentage), where the percentage determines the intensity of the grayscale effect, ranging from 0% to 100%. A value of 100% turns the color into a complete grayscale color, while a value of 0% will keep the element’s original color shades without any grayscale effect.

    This CSS property is not quite noticeable on black or white backgrounds because it adds shades of gray, and black is already the darkest shade while white is the lightest one. In simpler words, black and white will not get converted to grayscale because it already belongs to the darkest side of grayscale.

    For the filter to work properly, as a first step, we need to set the background-color property of the parent element. Afterward, we add the backdrop filter to the child elements we want to apply the grayscale effect. The backdrop filter will only affect the child element’s background color but not its content, text, images, etc.

    As a result, the parent element maintains its original background color, while the child element’s background is desaturated, creating a monochromatic, grayscale effect.

    Create a grayscale backdrop filter effect

    This HTML and CSS code above creates a <section> element (father) with a <p> element (child) inside. The section has a background color in a shade of pinkish peach, defined by the hex color code #f99bab. Initially, the paragraph inherits the same background color.

    <section>
  <p>...</p>
</section
    HTML
    /* PARENT ELEMENT */
section {
  background-color: #f99bab; // a shade of pinkish peach
}

/* CHILD ELEMENT */  
p {
  backdrop-filter: grayscale(50%);
}
    CSS

    We continue with the <p> element styled by a backdrop-filter with a grayscale value of 50%. This effect visually desaturates the paragraph’s background (the paragraph inherits its background from its parent, the section). This means that the colors where the backdrop filter is applied (the area behind the element) will be desaturated to 50%. As a result, a grayscale effect will be applied where the colors are halfway between their original color and grayscale while leaving the content unaffected.

    In simple terms, by setting this code, we create a parent element with a shade of pinkish peach-colored background, and its child element has a somewhat muted, desaturated appearance while at the same time retaining some of the original pink color.

    Α p html element inside a section element. They both have the same background color, a shade of pinkish peach (#f99bab).
    without grayscale
    Α p html element inside a section element. Its background color is a shade of pinkish peach (#f99bab). The child emelent had the backdrop-filter: grayscale(50%) CSS property which means the background color is a shade of pinkish peach desaturated by 50%.
    with grayscale(50%)
    You may also like 🎬
    A colorful image with a smaller grayscale version overlaid on top.
    CSS Grayscale Filter – A Complete Guide
    April 28, 2025
    The same image twice. On the left is the origin image while on the right is has the grayscale filter
    How to Make Grayscale Images with CSS
    September 23, 2024
    Boy and girl making graffiti with gray and grey sprays.
    Gray vs Grey in CSS. What Is the Right Choice?
    June 21, 2024
    Three identical waterdrops in different sizes. Image made by the author.
    How To Create A Stunning Gray CSS Water Drop
    April 7, 2025

    A grayscale-themed table

    Below, I have included a table that visually presents some possible variations of the grayscale backdrop filter effect. 😃

    Α table with different grayscales in each row. We have a zero grayscale, a 20%, 40%, 60% and finally 100%.
  • Introduction To The Powerful CSS Blur Effect

    Introduction To The Powerful CSS Blur Effect

    Hello everybody 😃 Today, we will discover the art of the powerful CSS blur effect. Get ready to meet the amazing backdrop-filter CSS property. We’ll dive 🤿 into the world of adding visual elegance and depth to our web design, and we will learn to create captivating and stunning web elements. Let’s get started!

    Adding basic HTML structure

    Let’s get started with the HTML setup. We create a parent div named custom-container for the background and a child div named blurry-container where we will apply the CSS blur effect. Follow along for the step-by-step process.

    <div class="custom-container">
  <div class="blurry-container"></div>
</div>
    HTML

    Adding the background image

    We move forward with the CSS structure by preparing the background. I opted for a striking and colorful background image as it is more impressive and gives prominence to our effect, setting background-image. I also add background-repeat which determines how the background image is shown, and background-size which sets the size of the image, in our case we want to fill the entire display. Completing it with height: 100vh for full-screen coverage.

    .custom-container {
  background-image: url(https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1194&q=80);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
    CSS
    Here we can see the image we chose for background.
    Original photo by Jezael Melgoza on Unsplash

    The next step is to create a “place” where we can accommodate our blur, I believe a box would serve this need. To begin, I create one by setting the appropriate width and height along with its border and border-radius. I utilized borders to ensure my box remains visible. Whether to keep them or not is entirely up to you. The design can still look great in both cases. Feel free to choose whichever option suits your preference or the project’s requirements. 😃

    .blurry-container {
  border: 2px solid white;
  border-radius: 5px;
  width: 400px;
  height: 500px;
}
    CSS
    A box created to demonstrate the CSS blur effect.

    If we want our box to share the same image as its background, and not just be transparent, it is crucial to add the background: inherit CSS property.

    In the following image, we can see clearly that our box now has the exact same image as its background.

    .blurry-container {
  ...
  background: inherit;
}
    CSS
    Applying the same background image to a box element.

    Now it’s time to center our box. We do so by applying the flex CSS property to the parent HTML element which is the custom-container.

    .custom-container {
  ...
  display: flex;
  align-items: center;
  justify-content: center;
}
    CSS
    A box centered using the flexbox method

    Adding the blur effect (backdrop-filter)

    We create the blur effect using the pseudo-element :before. To manage this, we have to set position:relative to the parent element and position: absolute to the child. The child element needs the content CSS property to be assigned an empty string value in order to be displayed. Despite the recent code adjustments, you won’t notice any visible changes on the screen just yet. 😭

    .custom-container {
  ...
  position: relative;
  .blurry-container {
    ...
    &:before {
      position: absolute;
      content: "";
    } /* end of before */
  } /* end of blurry-container */
} /* end of custom-container */
    SCSS

    Let’s proceed with our effect. 🥁 We do so by adding the backdrop-filter CSS property to :before pseudoelement. Increasing the pixel value intensifies the blur effect by creating a stronger visual impact. I’ve applied a 12px blur effect, but you have the flexibility to adjust it according to your preferences. If you desire a clearer look, feel free to reduce ⬇ the pixels. Alternatively, for a stronger fade effect, you can increase ⬆ the pixel value.

    &:before {
  ...
  backdrop-filter: blur(12px);
}
    SCSS
    You may also like 🎬
    A mirror with an avatar and a shine effect on top of it.
    How To Make a CSS Shine Effect Animation
    July 17, 2024
    A nature image. The half has its origin colors the other halh has only gray shades.
    Grayscale Backdrop Filter: What It Is and How to Use It
    September 9, 2024
    Two papers with folded corner effect
    Make a Unique Folded Corner Effect Utilizing the clip-path CSS Property
    March 31, 2025
    Blue water drop with text underneath. Image made by the author.
    CSS Water Drop Effect: How to Make Text Look Wet & Glossy
    May 15, 2025

    🔖 What to avoid when applying the blur effect

    Remember that the blur effect can sometimes get out of control on a web page because of how it’s applied to an element. When you use the blur effect, it makes the element bigger, like it’s expanded, depending on how much blur you want. So, the more blur you add, the larger the element becomes. Because of that, the element might grow so big that it spills out of its box or crashes into nearby elements. 😟

    The desired css blur effect by setting the ' backdrop-filter : blur(12px);' CSS property

    Observe how the blur CSS property overflows in the current setup above. To correct that, apply the overflow: hidden CSS property to the PARENT element custom-container. With this modification, you can control the blur effect and prevent it from causing a mess on your web page.

    .custom-container {
  ...
  overflow: hidden;
}
    SCSS

    … and boom 🥳 here it is! Our blur effect displayed flawlessly, as intended!

    By setting the 'overflow: hidden;' CSS property to the 'custom-container' our box is finally ready! 😃

    Complete code solution

    Below is the full code referenced in this blog post. Feel free to copy and use it in your own projects. If you have any questions or encounter any issues, don’t hesitate to reach out for assistance. You can easily copy the desired code snippet by clicking on the copy icon, located in the top-right corner of each snippet.

    <section class="custom-container">
  <div class="blurry-container">
    <div class="title">Hello World</div>
  </div> <!-- end of blurry-container -->
</section> <!-- end of customer-container -->
    HTML
    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.custom-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1194&q=80);
  background-repeat: no-repeat;
  background-size: cover;

  .blurry-container {
    position: relative;
    border: 2px solid white;
    border-radius: 5px;
    width: 400px;
    height: 500px;
    padding: 100px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    overflow: hidden;
    &:before {
      content: "";
      position: absolute;
      top: -20px;
      left: -20px;
      bottom: -20px;
      right: -20px;
      box-shadow: inset 0 0 300px rgba(25, 100, 128, 0.5);
      backdrop-filter: blur(12px);
    }
    .title {
      font-size: 50px;
      color: #132216;
      font-weight: bold;
      padding: 5px 20px;
      border: 2px solid #364739;
      border-radius: 50px;
      backdrop-filter: blur(8px);
    }
  } /* end of blurry-container */
} /* end of customer-container */
    SCSS
    Expand

    Complete code solution for post’s cover

    Below, I include the code for my post’s cover. I also added a title to see how we add text over the blur effect. 😎

    <section class="custom-container">
  <div class="blurry-container">
    <div class="title">Hello World</div>
  </div> <!-- end of blurry-container -->
</section> <!-- end of customer-container -->
    HTML
    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.custom-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(https://images.unsplash.com/photo-1440342359743-84fcb8c21f21?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGZvcmVzdHxlbnwwfDB8MHx8fDA%3D);
  background-repeat: no-repeat;
  background-size: cover;
  .blurry-container {
    position: relative;
    border: 2px solid #364739;
    border-radius: 20px;
    width: 500px;
    height: 300px;
    padding: 100px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    overflow: hidden;
    &:before {
      content: "";
      position: absolute;
      top: -20px;
      left: -20px;
      bottom: -20px;
      right: -20px;
      box-shadow: inset 0 0 100px rgba(100, 200, 100, 0.8);
      backdrop-filter: blur(2px);
    }
  } /* end of blurry-container */
  .title {
    font-size: 50px;
    color: #132216;
    font-weight: bold;
    padding: 5px 20px;
    border: 2px solid #364739;
    border-radius: 50px;
    backdrop-filter: blur(8px);
  }
} /* end of customer-container */
    SCSS
    Expand
    Applying CSS blur effect with overlaid text.