The problem
You want to create a modern glass-like card effect that shows a blurred background through the element, commonly seen in modern UI designs.
The solution
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}See it live
Parameters
backgroundcolorSemi-transparent background color
backdrop-filterfilterBlur amount for the glass effect
border-radiuslengthCorner rounding of the card
Put it to work
<div class="glass-card">
<h2>Glass Card Title</h2>
<p>This content appears on a frosted glass background.</p>
</div>Worth knowing
Ensure the parent element has a visible background for the blur effect to be noticeable. The -webkit-backdrop-filter is needed for Safari support.