v147 · CSS · concept 3 of 3

Badge Forge

Pick a shape, dial in the colours, set the border width. Get the CSS. Real box-shadow and border follow every vertex.

Requires Chrome 147+. The badge previews as a rectangle in earlier browsers.

Preview

BADGE

Controls

Shape

Background #0022ff

Border colour #000000

Text colour #fdfcf8

Border width 3px

Shadow size 4px

Generated CSS

how it works

border-shape accepts any <basic-shape> — polygon(), circle(), ellipse(), inset(), and the new shape() function. Percentage co-ordinates make the shape responsive to the element size. The border strokes along the polygon edges; box-shadow is cast from the polygon outline, not the bounding box.

.badge {
  border: 3px solid black;
  box-shadow: 4px 4px 0px black;
  border-shape: polygon(/* your points */);
}

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

Generated CSS

how it works

see also

implementation reference