• Previous CSS Tip
• Next CSS Tip

Cut your image into pieces

Cut your image into small pieces using one CSS instruction.

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

• Equal width buttons to the widest one A few lines of code ot create equal width buttons. January 20, 2022
• Stick an element to the top-right corner Place an element on the top-right corner of your CSS grid. January 13, 2022
• Full screen height container Make your container fill all the screen height. December 15, 2021
• max-width + centering with one instruction Use max() to center your element and set a max-width. December 10, 2021