3
Back

Gradient #52

glow-neon-lagoon

radial-glow-neon-lagoon

Copy styles

Tailwind
bg-[radial-gradient(48%_60%_at_12%_18%,color-mix(in_oklch,oklch(82%_0.15_190)_84%,transparent)_0%,transparent_100%),radial-gradient(52%_64%_at_86%_12%,color-mix(in_oklch,oklch(74%_0.14_250)_74%,transparent)_0%,transparent_100%),radial-gradient(74%_94%_at_52%_86%,color-mix(in_oklch,oklch(78%_0.16_155)_68%,transparent)_0%,transparent_100%),linear-gradient(150deg,oklch(14%_0.035_252)_0%,color-mix(in_oklch,oklch(24%_0.09_240)_70%,oklch(16%_0.04_210))_42%,color-mix(in_oklch,oklch(32%_0.08_200)_70%,oklch(18%_0.05_170))_72%,oklch(20%_0.04_180)_100%)] border border-solid border-[color-mix(in_oklch,oklch(78%_0.14_200)_26%,white)] shadow-[0_0_0_1px_color-mix(in_oklch,oklch(76%_0.15_190)_18%,transparent),0_18px_42px_-20px_color-mix(in_oklch,oklch(55%_0.16_210)_48%,transparent),0_0_52px_color-mix(in_oklch,oklch(72%_0.16_180)_20%,transparent)]
CSS3
.radial-glow-neon-lagoon {

  background-image:
    radial-gradient(48% 60% at 12% 18%, color-mix(in oklch, oklch(82% 0.15 190) 84%, transparent) 0%, transparent 100%),
    radial-gradient(52% 64% at 86% 12%, color-mix(in oklch, oklch(74% 0.14 250) 74%, transparent) 0%, transparent 100%),
    radial-gradient(74% 94% at 52% 86%, color-mix(in oklch, oklch(78% 0.16 155) 68%, transparent) 0%, transparent 100%),
    linear-gradient(150deg,
      oklch(14% 0.035 252) 0%,
      color-mix(in oklch, oklch(24% 0.09 240) 70%, oklch(16% 0.04 210)) 42%,
      color-mix(in oklch, oklch(32% 0.08 200) 70%, oklch(18% 0.05 170)) 72%,
      oklch(20% 0.04 180) 100%);
  border: 1px solid color-mix(in oklch, oklch(78% 0.14 200) 26%, white);
  box-shadow: 0 0 0 1px color-mix(in oklch, oklch(76% 0.15 190) 18%, transparent), 0 18px 42px -20px color-mix(in oklch, oklch(55% 0.16 210) 48%, transparent), 0 0 52px color-mix(in oklch, oklch(72% 0.16 180) 20%, transparent);
}