Studio

Effects Lab

Glass, neumorphism, layered shadows, glows, gradient borders and grain - as CSS and Tailwind.

Effect

Controls

Blur16px

Saturation160%

Tint

#ffffff

Opacity12%

Border25%

Shadow25%

Radius20px

Preview

Effects Lab

Depth without the fuss.

Tweak the controls; copy production-ready CSS or Tailwind utilities.

glass.css

.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.25);
}