Creating a Semi-Transparent Background with Blur Effect in CSS

 Here's a breakdown of how to use it:

1. Background Color: The background-color property sets the background color of an element. In this case, the color is set to white with an alpha (transparency) value of 0.6. The alpha value ranges from 0 (completely transparent) to 1 (fully opaque).

2. Backdrop Filter (for WebKit-based browsers): The -webkit-backdrop-filter property applies a visual effect to the area behind the element, creating a blur effect. In this case, the blur() function is used to specify the amount of blur. Here, it is set to 8 pixels.

3. Backdrop Filter (for non-WebKit browsers): The backdrop-filter property is a standard CSS property that works in non-WebKit browsers to apply a similar visual effect. It also uses the blur() function with a value of 8 pixels.

To apply these styles to an HTML element, you can use CSS. Here's an example:

html

<style>
    .my-element {
        background-color: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
</style>

<div class="my-element">
    <!-- Content goes here -->
</div>

In this example, the .my-element class is applied to a <div> element, but you can use it with any other HTML element. The background color will be white with a transparency of 0.6, and the backdrop filter will create a blur effect with a radius of 8 pixels.

Browse More Articles

Tweet

Written by Ragesh

Experienced Webdesigner and SEO Consultant Specialist from Cochin, Kerala with over three years of experience in the field of Search Engine Optimization, SEO and Internet Marketing