CSS Kaleidoscopes

import "https://cdn.jsdelivr.net/npm/baseline-status"; 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 # See the Pen by Adam Argyle ( @argyleink ) on CodePen . Radial gradient kaleidoscope # See the Pen by Adam Argyle ( @argyleink ) on CodePen . Conic gradient kaleidoscope # Fork by Nils Riedemann See the Pen by Adam Argyle ( @argyleink ) on CodePen . Fork by Nils Riedemann See the Pen by Adam Argyle ( @argyleink ) on CodePen . Send more forks!