RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
Short video switching between the two kaleidoscopes
A series of images of an avatar doing a bunch of skateboard tricks.2 min read

CSS Kaleidoscopes

css

Gradients are so fun, so complex, so powerful. I just can't get enough of messing with them.

Todays post was me wanting to create a kaleidoscope type effect using linear() easing with varied durations for hopefully infinite combinations.

Here's a spiffy preview of some of the combinations:

The demo effects are thanks to linear() and @property.

Each of the demo's has a ton of fun levers to pull in the CSS. Def try changing variables, durations, easings, and more.

It's super fun.

Linear gradient kaleidoscope #

Radial gradient kaleidoscope #

Conic gradient kaleidoscope #

Fork by Nils Riedemann

Fork by Nils Riedemann

Send more forks!

1 mention #

30likes
4reposts
  • developez
  • Paul Kinlan
  • Necrite
  • Daniel Schroeder | aka deadlydog

Join the conversation on