CSS Tip

Cut your image into pieces

Cut your image into small pieces using one CSS instruction.

A image cut into small pieces

img {
  --n: 10; /* number of rows */
  --m: 15; /* number of columns */
  --gap: 3px;
  mask:
    conic-gradient(from 90deg at var(--gap) var(--gap),#000 90deg,#0000 0) 
    calc(-1*var(--gap)) calc(-1*var(--gap))/
    calc((100% + var(--gap))/var(--m))
    calc((100% + var(--gap))/var(--n))
}

See the Pen cut image into small pieces by Temani Afif (@t_afif) on CodePen.

More CSS Tips