CSS Tip

Starburst images with rotation

Place your image inside a Starburst shape with a cool rotation 🤩

Get the code in no time using an Online Generator for Starburst Shape

Images with Starburst shapes

img {
  aspect-ratio: 1;
  animation: spike1 .8s linear infinite;
}
/* The below are generated using: https://css-generators.com/starburst-shape/
   Define the number of spikes then: 
   - Place the rotation at min and copy the value on the 0% state
   - Place the rotation at max and copy the value on the to state
   That's all!
*/
@keyframes spike1 {
  0% {
    clip-path: /* from the generator */;
  }
  to {
    clip-path: /* from the generator */;
  }
}

See the Pen Starburst rotating images by Temani Afif (@t_afif) on CodePen.

More CSS Tips