Skip to main content
CSS Tip

Turn an image into a postage stamp

Transform your image into a cool postage stamp with a few lines of code

CSS-only overlay reveal animation

img {
--r: 20px; /* control the radius of the circles */
padding: var(--r);
filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);
background:
radial-gradient(50% 50%,#0000 65%,#fff 67%) round
var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r));
}

See the Pen CSS-only Stamp effect by Temani Afif (@t_afif) on CodePen.


More CSS Tips