3
Back

Gradient #54

mesh-candy-cloud

radial-mesh-candy-cloud

Copy styles

Tailwind
bg-[radial-gradient(54%_74%_at_12%_10%,color-mix(in_oklch,oklch(86%_0.11_330)_65%,transparent)_0%,transparent_100%),radial-gradient(50%_72%_at_84%_16%,color-mix(in_oklch,oklch(89%_0.1_45)_65%,transparent)_0%,transparent_100%),radial-gradient(72%_96%_at_52%_90%,color-mix(in_oklch,oklch(84%_0.11_210)_65%,transparent)_0%,transparent_100%),linear-gradient(155deg,oklch(98%_0.01_350)_0%,oklch(95%_0.03_320)_44%,oklch(94%_0.035_40)_74%,oklch(96%_0.025_220)_100%)] border border-solid border-[color-mix(in_oklch,oklch(78%_0.09_330)_18%,white)]
CSS3
.radial-mesh-candy-cloud {

  background-image:
    radial-gradient(54% 74% at 12% 10%, color-mix(in oklch, oklch(86% 0.11 330) 65%, transparent) 0%, transparent 100%),
    radial-gradient(50% 72% at 84% 16%, color-mix(in oklch, oklch(89% 0.1 45) 65%, transparent) 0%, transparent 100%),
    radial-gradient(72% 96% at 52% 90%, color-mix(in oklch, oklch(84% 0.11 210) 65%, transparent) 0%, transparent 100%),
    linear-gradient(155deg, oklch(98% 0.01 350) 0%, oklch(95% 0.03 320) 44%, oklch(94% 0.035 40) 74%, oklch(96% 0.025 220) 100%);
  border: 1px solid color-mix(in oklch, oklch(78% 0.09 330) 18%, white);
}