← All elements
<div class="hb"><div class="in"><span>JD</span></div><i></i></div>About this card
A hexagon-shaped avatar frame with a gradient ring made from two nested clip-path shapes and a status dot.
How it works
Two hexagons are stacked. The outer one has a gradient background and acts as the border, and the slightly smaller inner one is dark and holds the initials, so the gradient shows as an outline following the hexagon edge. A drop-shadow filter on the outer shape follows the clip-path, which a box-shadow cannot do.
Ways to customise it
- Change the gradient colours of the border.
- Replace the initials with an image.
- Move the green status dot with the right and bottom values.
Good to know
Clipping removes any outline, so keep the inner content visible and focus the surrounding link if it is clickable. Add alt text when you use a real photo.
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.