3
Back

Gradient #58

mesh-petal-frost

radial-mesh-petal-frost

Copy styles

Tailwind
bg-[radial-gradient(56%_78%_at_10%_10%,color-mix(in_oklch,oklch(86%_0.08_330)_62%,transparent)_0%,transparent_100%),radial-gradient(52%_74%_at_86%_12%,color-mix(in_oklch,oklch(88%_0.06_250)_58%,transparent)_0%,transparent_100%),radial-gradient(74%_96%_at_50%_88%,color-mix(in_oklch,oklch(90%_0.05_180)_52%,transparent)_0%,transparent_100%),linear-gradient(145deg,oklch(99%_0.006_300)_0%,oklch(96%_0.02_330)_38%,oklch(95%_0.02_250)_70%,oklch(97%_0.015_180)_100%)] border border-solid border-[color-mix(in_oklch,oklch(74%_0.06_300)_16%,white)]
CSS3
.radial-mesh-petal-frost {

  background-image:
    radial-gradient(56% 78% at 10% 10%, color-mix(in oklch, oklch(86% 0.08 330) 62%, transparent) 0%, transparent 100%),
    radial-gradient(52% 74% at 86% 12%, color-mix(in oklch, oklch(88% 0.06 250) 58%, transparent) 0%, transparent 100%),
    radial-gradient(74% 96% at 50% 88%, color-mix(in oklch, oklch(90% 0.05 180) 52%, transparent) 0%, transparent 100%),
    linear-gradient(145deg, oklch(99% 0.006 300) 0%, oklch(96% 0.02 330) 38%, oklch(95% 0.02 250) 70%, oklch(97% 0.015 180) 100%);
  border: 1px solid color-mix(in oklch, oklch(74% 0.06 300) 16%, white);
}