← All elements
<div class="hs"><div><b>98</b><span>Score</span></div></div>About this card
A hexagonal badge with a gradient edge, a big value and a caption, ideal for achievements.
How it works
Two clipped hexagons are nested. The outer one is slightly larger with a three-colour gradient, which becomes the border, and the inner dark one carries the number. A drop-shadow filter follows the clipped outline.
Ways to customise it
- Change the number and caption.
- Edit the border gradient.
- Use it as an achievement badge.
Good to know
A number alone needs context, so keep the caption. clip-path is supported by all current browsers.
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.