Turn an image into a postage stamp
Transform your image into a cool postage stamp with a few lines of code
- No extra element (only the
<img>tag) - Only two CSS gradients
- Works with any image size
- Easy to adjust using CSS variables
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.