← All elements
<div class="gp"><div class="av">JD</div><h3>Jane Doe</h3><p>Front-end designer</p><div class="tags"><span>CSS</span><span>HTML</span><span>UI</span></div></div>About this card
A frosted-glass profile card over a gradient backdrop, using backdrop-filter, a soft border and a lift on hover.
How it works
The card has a semi-transparent white background, a thin light border and backdrop-filter: blur, which blurs whatever is behind it, so the colourful gradient shows through as frosted glass. A soft shadow and a lift on hover add depth, and the avatar is a gradient circle with initials.
Ways to customise it
- Change the page gradient behind the card.
- Edit the blur radius.
- Replace the initials with a photo.
Good to know
backdrop-filter is supported in current browsers, and the card remains readable as a plain translucent box where it is not. Check text contrast against the brightest part of the background.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.