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: 10px; /* control the radius of the circles */
padding: calc(2*var(--r));
filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);
background:
radial-gradient(var(--r),#0000 98%,#fff) round
calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r)),
linear-gradient(#fff 0 0) no-repeat
50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
}

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


More CSS Tips