3
Back

Gradient #56

glow-lilac-glass

radial-glow-lilac-glass

Copy styles

Tailwind
bg-[radial-gradient(48%_60%_at_15%_14%,color-mix(in_oklch,oklch(84%_0.1_315)_70%,transparent)_0%,transparent_100%),radial-gradient(54%_66%_at_84%_16%,color-mix(in_oklch,oklch(81%_0.08_265)_68%,transparent)_0%,transparent_100%),linear-gradient(150deg,color-mix(in_oklch,oklch(98%_0.008_300)_88%,white)_0%,color-mix(in_oklch,oklch(92%_0.04_300)_80%,white)_40%,color-mix(in_oklch,oklch(90%_0.05_260)_72%,white)_100%)] border border-solid border-[color-mix(in_oklch,oklch(72%_0.08_290)_20%,white)] shadow-[0_0_0_1px_color-mix(in_oklch,oklch(84%_0.07_290)_14%,transparent),inset_0_1px_0_rgba(255,255,255,0.45)]
CSS3
.radial-glow-lilac-glass {

  background-image:
    radial-gradient(48% 60% at 15% 14%, color-mix(in oklch, oklch(84% 0.1 315) 70%, transparent) 0%, transparent 100%),
    radial-gradient(54% 66% at 84% 16%, color-mix(in oklch, oklch(81% 0.08 265) 68%, transparent) 0%, transparent 100%),
    linear-gradient(150deg,
      color-mix(in oklch, oklch(98% 0.008 300) 88%, white) 0%,
      color-mix(in oklch, oklch(92% 0.04 300) 80%, white) 40%,
      color-mix(in oklch, oklch(90% 0.05 260) 72%, white) 100%);
  border: 1px solid color-mix(in oklch, oklch(72% 0.08 290) 20%, white);
  box-shadow: 0 0 0 1px color-mix(in oklch, oklch(84% 0.07 290) 14%, transparent), inset 0 1px 0 rgba(255,255,255,0.45);
}