Create a Glassmorphism Effect with Four CSS Properties

Visual Design · gradients

Updated 2026-07-28

Build the glass foundation with a semi-transparent background. Use an rgba color value with low opacity so the surface becomes partially see-through while maintaining readability.
Add background blur to create the frosted glass effect. Use backdrop-filter: blur() to soften and distort the content behind the element, making the surface feel like real glass.
Add a subtle border to capture the light effect. A thin, low-opacity white border creates a highlight around the edges and helps separate the glass surface from the background.
Add a soft shadow to create depth. A gentle box-shadow makes the element appear elevated instead of flat against the page.
Combine these four properties to create a reusable glass effect:

Apply the same recipe across different UI elements such as cards, panels, modals, and navigation surfaces. The effect works because each layer contributes to the illusion of depth and material.