Glassmorphism Generator

This is the single most important property for the glassmorphism effect. It blurs everything behind the element, creating the frosted glass look. The blur value is measured in pixels. Values between 8px and 24px work best — too low and the glass looks transparent rather than frosted; too high and nothing behind the card is recognisable. Note: without a vibrant background behind the card, this property has very little visible effect.

Applied alongside blur, saturate() boosts the colour vibrancy of everything visible through the glass. This gives the frosted glass a vivid, glowing quality that plain blurring doesn't achieve on its own. Values between 150% and 200% are typical. Setting it to 100% means no change; values above 200% can make the glass look very intense.

This controls the glass panel's tint colour and opacity. Using rgba() allows you to set how visible (opaque) the glass is. A white glass with 10–20% opacity is the classic glassmorphism look. You can use any colour — blue glass, pink glass, or even a very dark tint for a smoked glass effect — by changing the RGB values. Keep opacity low; high values make the card look like a solid-colour box rather than glass.

A thin, semi-transparent white border catches light and defines the edge of the glass card, making it feel solid rather than floating. A 1px border at 20–30% opacity is the standard. Increasing the width to 2px or the opacity to 50% creates a more defined, modern look. A border with 0% opacity removes the edge highlight entirely.

The shadow grounds the glass card and creates the sense of depth and elevation. The glassmorphism convention is to use a soft, spread-out shadow (large blur value, low opacity) rather than a crisp, dark shadow. A shadow with 0 X offset, +24px Y offset, and 48px blur at 12% opacity creates a natural floating look. The Y offset controls the perceived height of the card above the background.