Make a div transparent like a blurred mirror
Categories:
Creating a Blurred Mirror Effect with CSS Transparency

Learn how to make a div transparent with a blurred background, mimicking a frosted or blurred mirror effect using modern CSS techniques.
Achieving a blurred, transparent effect on a div
element, often referred to as a 'frosted glass' or 'blurred mirror' effect, is a popular design trend. This effect allows the background content to show through, but in a blurred state, adding depth and visual interest to your web layouts. This article will guide you through the CSS properties required to implement this effect effectively.
The Core CSS Properties: backdrop-filter
The primary CSS property for creating a blurred mirror effect is backdrop-filter
. This property applies graphical effects like blur, grayscale, or sepia to the area behind an element. Because it affects the backdrop, the element itself remains clear, while its background becomes blurred. This is crucial for achieving the desired effect without blurring the content inside the div
.
.blurred-mirror {
background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
backdrop-filter: blur(10px); /* Apply blur to the background behind this element */
-webkit-backdrop-filter: blur(10px); /* Safari support */
border-radius: 8px;
padding: 20px;
color: #333;
}
Basic CSS for a blurred mirror effect
backdrop-filter
property is relatively new. While widely supported, always include the -webkit-
prefix for broader compatibility, especially with Safari browsers. You can check current browser support on sites like Can I use... for backdrop-filter
.Understanding the Components
Let's break down the key properties used in the example above:
1. background-color: rgba(R, G, B, A);
This sets the background color of your div
. The crucial part here is the A
(alpha) value, which controls the opacity of the div
itself. A value between 0
(fully transparent) and 1
(fully opaque) will allow the blurred background to show through. A value around 0.3
to 0.5
often works well for a subtle frosted look.
2. backdrop-filter: blur(Xpx);
This is where the magic happens. blur(Xpx)
applies a Gaussian blur effect to the area behind the element. The Xpx
value determines the intensity of the blur. Experiment with different pixel values (e.g., 5px
, 10px
, 20px
) to find the desired level of blur for your design.
3. -webkit-backdrop-filter: blur(Xpx);
This is the vendor prefix for WebKit-based browsers (like Safari) to ensure compatibility. It's good practice to include it for wider browser support.
4. Other Styling (border-radius
, padding
, color
)
These are standard CSS properties to style the div
itself, such as rounding corners, adding internal spacing, and setting text color. These do not directly contribute to the blur effect but enhance the overall appearance of the element.
flowchart TD A[HTML Element] --> B{"Has `background-color` with `alpha`?"} B -- Yes --> C[Background Visible] B -- No --> D[Background Not Visible] C --> E{"Has `backdrop-filter: blur()`?"} E -- Yes --> F[Background is Blurred] E -- No --> G[Background is Clear] F --> H[Result: Blurred Mirror Effect] G --> I[Result: Transparent Overlay] D --> J[Result: Opaque Element]
Decision flow for achieving the blurred mirror effect
Full Example and Considerations
To see this in action, consider a simple HTML structure with a background image and a div
overlaying it. The div
will then adopt the blurred mirror effect.
<div class="background-container">
<div class="blurred-mirror">
<h1>Welcome!</h1>
<p>This content is clear, but the background behind me is blurred.</p>
</div>
</div>
HTML structure for the blurred mirror effect
body {
margin: 0;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.background-container {
width: 100%;
height: 400px;
background-image: url('https://picsum.photos/id/1018/1000/600'); /* Replace with your image */
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden; /* Important for backdrop-filter to work correctly */
}
.blurred-mirror {
background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent white */
backdrop-filter: blur(10px); /* Apply blur to the background behind this element */
-webkit-backdrop-filter: blur(10px); /* Safari support */
border-radius: 15px;
padding: 30px;
margin: 20px;
color: #333;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 80%;
}
Complete CSS for the blurred mirror effect with a background image
backdrop-filter
to work, the element it's applied to must have some transparency (via background-color
with an alpha channel or opacity
) and its parent container should have overflow: hidden;
or be a stacking context. Without transparency, there's nothing to filter behind it. Also, ensure the element is positioned relative to content it should blur.