Logo

Glassmorphism CSS Generator

Design beautiful, frosted-glass UI elements in seconds. Adjust the blur, opacity, and saturation to generate production-ready CSS.

Properties

10px
20%
150%
24px
#ffffff

Generated CSS

/* Glassmorphism CSS */
.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.125);
}

Tailwind CSS Example

<!-- Tailwind CSS Arbitrary Values -->
<div class="bg-[#ffffff]/20 backdrop-blur-[10px] backdrop-saturate-[150%] rounded-[24px] border border-white/10 shadow-lg">
  ...
</div>

The Ultimate Glassmorphism CSS Generator

Glassmorphism is a leading UI design trend characterized by semi-transparent backgrounds, subtle borders, and background blurring. It creates a "frosted glass" effect that allows vibrant backgrounds and typography to shine through while maintaining readability and visual hierarchy.

How to Implement Glassmorphism with CSS

To create a true glass effect, you cannot rely solely on standard CSS opacity. Using opacity: 0.5; makes the entire element (including the text inside it) transparent, which ruins accessibility. Instead, the magic happens using a combination of two specific CSS properties:

  • background: rgba(255, 255, 255, 0.2); - This applies transparency only to the background layer, keeping text fully opaque.
  • backdrop-filter: blur(10px); - This applies a blur effect to whatever elements are positioned behind your container. Note that we also include the -webkit-backdrop-filter prefix to ensure compatibility with Safari browsers.

Why Adjust Saturation?

When you blur an image or a vibrant background, the colors naturally desaturate and become muddy. By adding saturate(150%) to your backdrop-filter chain, you boost the vibrancy of the colors passing through the glass. This ensures your UI element remains vivid and premium-looking, avoiding the "gray fog" effect that plagues poorly designed glass UI components.

Accessibility Considerations

While glassmorphism looks stunning, it must be used carefully. Avoid placing thin, low-contrast text directly over heavily blurred, complex backgrounds. Always ensure your text meets WCAG contrast ratios. Using a light border (e.g., border: 1px solid rgba(255,255,255,0.1)) helps define the edges of the card, separating it cleanly from the background and drastically improving usability.