CSS Shadow & Glassmorphism Generator,
instant code, live preview.

CSS Reference

Box shadows and glassmorphism: when to use each and how they work.

CSS box-shadow

The box-shadow property adds one or more shadows to an element. The full syntax for a single shadow is:

Where X is the horizontal offset (positive = right, negative = left), Y is the vertical offset (positive = down), blur is the blur radius (0 = sharp edge), andspread expands or contracts the shadow size before blurring.

Multiple shadows can be layered by comma-separating them, applied in order from front to back. The first shadow in the list sits on top. This enables complex effects like soft multi-layer depth:

Inset shadows

The inset keyword moves the shadow to the inside of the element, between its border and its content. Inset shadows are used to simulate pressed or recessed surfaces, inner glows, and cut-out depth effects common in neumorphic or skeuomorphic design.

An inset shadow does not extend beyond the element's border box; it clips to the element's bounds. This makes it behave fundamentally differently from a regular shadow, which extends outside the element and can overlap adjacent elements.

Choosing shadow values for realistic depth

The most naturalistic-looking shadows follow a few principles:

• Keep the light source consistent: If shadows fall to the lower-right, they should do so throughout the entire UI. A common convention is Y-offset slightly larger than X-offset, simulating a light source from the upper-left.
• Use low opacity with moderate blur: Very dark, hard-edged shadows look unnatural. Shadows at 15–30% opacity with a blur of 1–3× the offset read as physically plausible.
• Layer multiple soft shadows: One shadow with a very large blur can look muddy. Two or three shadows — one tight and dark for contact shadow, one wide and light for ambient occlusion — produces a much more refined depth effect.
• Use coloured shadows: In dark UIs, shadows can be slightly tinted to match the element's accent colour, creating a subtle glow rather than a grey shadow. Use with restraint.

Glassmorphism and backdrop-filter

Glassmorphism is a UI design trend that simulates the appearance of frosted or translucent glass. The primary CSS property it relies on isbackdrop-filter: blur(), which blurs whatever is visible behind the element — including other DOM elements, images, and background gradients.

The core CSS for a glassmorphic card:

Why backdrop-filter needs a fallback

backdrop-filter is supported in all major browsers except Firefox, where it requires a flag (layout.css.backdrop-filter.enabled) and is disabled by default as of 2024. To ensure Firefox users see a usable fallback, always include a slightly more opaque solid or semi-transparent background as a fallback, typically applied via@supports not (backdrop-filter: blur(1px)):

For most UI use cases, a fallback of 60–80% opacity background (without blur) provides acceptable contrast and visual clarity in Firefox.

Glassmorphism design principles

• Requires a colourful background: The frosted effect is only visible if there are colours, gradients, or shapes behind the glass element to blur. A glass card on a plain white background is invisible. Use gradient mesh backgrounds, abstract blobs, or imagery.
• Border matters: A subtle semi-transparent border (1px, 20–30% opacity) gives the glass edge a clean, physically plausible appearance. Without the border, the glass can look like a plain transparent element.
• Text must remain readable: Low-opacity glass can make text hard to read against busy backgrounds. Use a slightly higher background opacity for text-heavy cards, add a text-shadow, or ensure the background behind the card has enough contrast.
• Blur amount: 8–16px blur is the standard range for most UI components. Higher blur values (20–40px) create a more dramatic frosted effect but can obscure background content entirely, losing the glass feel. Blur below 4px is barely perceptible and may not be worth the rendering cost.

Performance considerations

Both box-shadow and backdrop-filter are composited properties, meaning the browser handles them on the GPU compositor thread. This makes them generally performant when static. However, animating box-shadow (especially large blur values) can trigger expensive repaints. Prefer animating opacityor transform for transitions, and usewill-change: transform to hint the browser to promote the element to its own GPU layer before the animation begins.

Excessive use of backdrop-filter on many overlapping elements can cause frame rate drops on lower-powered devices, particularly mobile. Limit blur effects to one or two primary UI surfaces (navigation bars, modals, side panels) rather than applying them to every card on a page.