Glassmorphism Generator

Create stunning UI components with modern frosted glass effects.

Customize Effect

Adjust the sliders to fine-tune the glass effect.

Blur Value10px

Opacity / Transparency20%

Card Shadow10

Glass Color (Hex)

Glass Effect

Interactive glassmorphism preview. Drag me around to see the blur update dynamically!

Generated Code

Vanilla CSS

Tailwind

/* CSS */
.glass-container {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}