{
  "$type": "site.standard.document",
  "description": "Animating gradients in 2025.",
  "path": "/css-kaleidoscopes",
  "publishedAt": "2025-02-22T23:56:04.817Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "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!",
  "title": "CSS Kaleidoscopes"
}