Advertisement

Glassmorphism Generator

Generate beautiful glassmorphism CSS effects for your user interface. Adjust blur, transparency, and saturation to create the perfect frosted glass look.

Configuration

16px
0.6
180%

CSS Code

background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.125);

Preview

Glass Effect

This is how your content will look on top of the glassmorphism effect.

What is Glassmorphism?

Glassmorphism is a design trend in user interfaces that emphasizes light or dark objects, placed on top of colorful backgrounds. A background-blur is placed on the objects which allows the background to shine through, giving them the impression of frosted glass.

Key Characteristics

  • Translucency: Background blur using `backdrop-filter`.
  • Multi-layered approach: Objects floating in space.
  • Vivid colors: To highlight the blurred transparency.
  • Subtle border: A semi-transparent white border simulates the glass edge.
Advertisement