Glassmorphism and neumorphism: glass and soft UI that stay readable
Glass where the blur decides, where it came from, neumorphism as soft plastic, how to make both readable and which one to choose — with live examples and prompts for images.
In short
Glassmorphism makes interface layers look like frosted glass: a translucent card blurs what lies behind it, a thin light edge outlines it, and colour from the background shines through. Neumorphism, or soft UI, makes elements look extruded from the background itself: one colour, a light shadow on one side and a dark shadow on the other, and pressed states made with inner shadows. Both are beautiful in a mock-up and fragile in use. Glass needs a lively background and a denser, tinted layer under text, or the text drowns. Neumorphism needs extra contrast — an outline, a colour for the active state, a word — or buttons, states and plain bumps look the same. Used as an accent with these fixes, both styles work well for players, widgets, dashboards and smart-home controls.
Glass: the blur decides
Move the slider. At zero the card is just a pale rectangle over colour spots; with blur it turns into frosted glass, and the text becomes readable.
Where glass came from
Glassmorphism dashboard UI for a personal finance app, desktop screenshot, frosted glass cards with background blur and thin light borders floating over large soft blurred blobs of acid lime, olive green and sage on a deep graphite background, white readable text on darker tinted glass, a balance card, a spending chart and a transactions list, modern clean typography, flat 2D UI design, aspect ratio 16:9Translucent glass has appeared in operating systems several times: Aero in Windows Vista in 2007, blurred panels in iOS 7 in 2013, translucent windows in macOS. In 2025 Apple made glass the basis of its interfaces again — with Liquid Glass — and the style got a new wave on the web.
On a site, glass works as a layer over something alive: a photo, a video, colour spots. Over a plain white page it is invisible.
Neumorphism: soft plastic
A smart-home panel in one sage tone. Press the buttons: they sink into the surface; the switch is a real checkbox.
Living room
Press the buttons and the switch. Beautiful — but notice how hard it is to tell at a glance what can be pressed and what is just a bump in the background.
Where neumorphism came from
Neumorphic smart home mobile app screen, iPhone mockup, soft sage-green monochrome interface, controls extruded from the background with a light shadow on the top left and a dark shadow on the bottom right, a round thermostat dial showing 22°, toggle switches and buttons with clear text labels, the active button in dark graphite with an acid-lime label for contrast, soft UI design, crisp, aspect ratio 4:5The name — new + skeuomorphism — appeared at the end of 2019, when soft monochrome mock-ups went viral on Dribbble. It was a reaction to years of flat design: designers wanted volume and touch back, but without the leather and wood of old skeuomorphism.
The style stayed mostly in concepts: in real products it quickly ran into contrast. Accessibility rules ask for at least 3 to 1 contrast for the borders of controls, and the soft shadows of neumorphism rarely give it.
How to make them readable
The same glass card and the same two buttons. Three fixes turn a Dribbble shot into a working interface.
text on a busy background, on looks the same as off
denser glass with a dark tint; buttons have an outline, the active one gets colour and a word
Glass or neumorphism
They are often mentioned together, but they work on opposite backgrounds.
| Glass | Neumorphism | |
|---|---|---|
| Built on | a translucent layer and blur | a bump of the background with two shadows |
| Needs | a lively, colourful background | a plain, calm background |
| Main risk | text on a busy background | buttons and states that look alike |
| Fits | panels over photos, menus, players | single widgets, smart home, calculators |
| Cost | blur is heavy for weak phones | light: only shadows |
Glass and neumorphism in code: 2 examples
A glass card with a fallback for browsers without blur, and a neumorphic button with an outline that gives the contrast accessibility needs.
A glass card
Under text the glass is denser and tinted; without blur support it becomes an opaque panel.
.glass {
padding: var(--space-5);
border-radius: var(--radius-lg);
color: #FFFFFF;
background: rgb(23 24 23 / 0.55); /* a dark tint keeps white text readable */
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
backdrop-filter: blur(16px) saturate(1.2);
}
/* No blur — no glass: an opaque panel instead of a see-through one */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgb(23 24 23 / 0.92); }
}
/* For those who asked the system for more contrast */
@media (prefers-contrast: more) {
.glass { background: #171817; backdrop-filter: none; }
}A neumorphic button
Two shadows of one tone, inner shadows when pressed, and an outline plus a colour for the active state.
:root {
--soft-bg: #D0D7CB;
--soft-light: #E6ECE3;
--soft-dark: #A8ABA3;
}
.soft-button {
min-height: 2.75rem;
padding: 0 1.25rem;
border: 0;
border-radius: 0.5rem;
background: var(--soft-bg);
color: #171817;
box-shadow:
inset 0 0 0 1.5px #434541, /* the outline gives the 3:1 contrast */
5px 5px 10px var(--soft-dark),
-5px -5px 10px var(--soft-light);
}
.soft-button:active {
box-shadow:
inset 0 0 0 1.5px #434541,
inset 4px 4px 8px var(--soft-dark),
inset -4px -4px 8px var(--soft-light);
}
/* "On" is shown by colour and by a word, not by a shadow alone */
.soft-button[aria-pressed="true"] {
background: #171817;
color: #E4FF4E;
}
.soft-button:focus-visible { outline: 2px solid #171817; outline-offset: 3px; }7 rules for glass and soft UI
-
01
Glass needs something behind it
A photo, a video or colour — over white it is invisible.
-
02
Denser glass under text
A tint and enough blur, so the text has 4.5 to 1.
-
03
A fallback without blur
An opaque panel where backdrop-filter does not work.
-
04
An outline for soft controls
At least 3 to 1 for the boundaries of buttons and fields.
-
05
State by colour and word
An inner shadow alone does not show that something is on.
-
06
An accent, not the whole interface
A player, a widget, a card — the rest stays flat and clear.
-
07
Respect system settings
More contrast and less transparency when the person asks for it.
Common mistakes with glass and neumorphism
-
Thin glass over a busy photo
The text drowns in what shines through.
-
Glass over a white page
A grey rectangle instead of glass.
-
A whole interface of soft bumps
Nothing shows what can be pressed.
-
State by shadow only
“On” and “off” differ by a few pixels of shadow.
-
Blur everywhere
Ten blurred layers slow down scrolling on weak phones.
-
A dark theme for soft UI
Shadows almost disappear, and so do the shapes.
Questions about glass and neumorphism
What is glassmorphism?
A style where interface layers look like frosted glass: translucent, with background blur and a thin light edge.
What is neumorphism?
Soft UI where elements look extruded from the background: one colour, a light and a dark shadow, inner shadows when pressed.
How do I make glass in CSS?
With backdrop-filter: blur() on a translucent background, a thin light border and a fallback for browsers without support.
Is neumorphism accessible?
In its pure form — rarely: the contrast of control borders is too low. With an outline, colour for states and text labels it can be.
Does glass slow a site down?
Blur is computed on every repaint; one or two glass layers are fine, a whole page of them can stutter on weak phones.
Where do these styles fit best?
Glass — in panels over photos, players and menus. Soft UI — in single widgets, calculators and smart-home controls.
Online form
Soft, glossy
and readable
I design interfaces with glass and soft UI accents that stay readable, accessible and fast on any device. Tell me about the project — I answer within one working day.