Skeuomorphism vs neumorphism vs flat design

Skeuomorphism makes a control look and behave like a real object. Neumorphism makes it look like a soft bump pushed out of the page. Flat design removes depth altogether. Glassmorphism puts it on a pane of frosted glass. The fastest way to see the difference is the same button in all four. Press each one:

Skeuomorphism vs neumorphism vs flat design vs glassmorphism

The four styles answer one question differently: how do you show that something is a control? Flat uses colour. Neumorphism uses soft shadows in the page's own colour. Skeuomorphism uses a real object's light, depth and travel. Glassmorphism uses layers you can see through.

Contrast, measured

Measured against WCAG 2, flat and skeuomorphic controls pass and neumorphic and glass ones fail in places. WCAG asks for 4.5:1 for normal-size text (SC 1.4.3) and 3:1 for the parts of a control you need to see it and its state (SC 1.4.11). These are the ratios of the exact colours in the demos on this page, computed with the WCAG relative-luminance formula. Translucent layers are blended over their backdrop first, and glass is measured over both the violet and the amber disc.

A button with a text label doesn't strictly need its outline at 3:1, since the words say what it is. But a switch's thumb and track are the only way to see whether it is on, so they do. That is where neumorphism fails hardest: its thumb is the colour of its track.

What is flat design?

Flat design shows controls with colour and type alone, without shadows, gradients or texture. It took over in 2013, when iOS 7 dropped Apple's textures and most of the industry followed. It's fast, clean and scales to dense screens. Its weakness is the reason the other styles exist: a flat button and a flat label can look the same, so users have to learn what's clickable instead of seeing it.

.button {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.625rem;
  font: 600 0.9375rem/1 system-ui, sans-serif;
  cursor: pointer;
  background: oklch(0.52 0.13 255);
  color: white;
}
.button:active {
  background: oklch(0.46 0.13 255);
}

Skeuomorphism vs flat design

The difference between skeuomorphism and flat design is whether a control's shape carries information. Flat design moves that information into colour, position and words. Skeuomorphism keeps it in the object: raised means pressable, sunk means on, a cover means careful. Press the flat and skeuomorphic buttons above: the flat one changes colour, the skeuomorphic one moves. Most good interfaces now mix them, flat for the page and depth for the controls that matter.

What is neumorphism in UI?

Neumorphism (also spelled neomorphism, short for “new skeuomorphism”) draws controls in the same colour as the page and lifts them with one light and one dark soft shadow. It appeared on Dribbble around 2019. It looks calm in a mockup, and that's where most of it stayed. The problem is contrast. In the example above, the label is 2.91:1 against the button, under WCAG's 4.5:1 for text, the button's fill is identical to the page, and its dark shadow is only 1.72:1 against it. Pressed and unpressed states look almost the same.

.button {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.625rem;
  font: 600 0.9375rem/1 system-ui, sans-serif;
  cursor: pointer;
  background: #e0e5ec;
  color: #7b8698;
  box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
}
.button:active {
  box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
}

Neumorphism vs skeuomorphism: the difference is contrast

Neumorphism and skeuomorphism both use light and shadow, but neumorphism shapes the page itself while skeuomorphism places an object on it. Skeuomorphism borrows from a real object: a key that stands up from the surface, has a side you can see, and sinks when you press it. The 2010-era version used it as decoration (leather calendars, felt card tables), which is why it got a bad name. The modern version, sometimes called neo-skeuomorphism, uses depth only where it tells the user something: what can be pressed, what state a switch is in, which action is dangerous.

.button {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.625rem;
  font: 600 0.9375rem/1 system-ui, sans-serif;
  cursor: pointer;
  --highlight: oklch(1 0 0 / 0.35);
  --shade: oklch(0 0 0 / 0.35);
  --edge: oklch(0.36 0.11 255);
  background: oklch(0.52 0.13 255)
    linear-gradient(to bottom, oklch(1 0 0 / 0.18), transparent 60%);
  color: white;
  box-shadow: inset 0 1px 0 var(--highlight), 0 1px 0 var(--edge),
    0 2px 0 var(--edge), 0 3px 5px var(--shade);
  transition: translate 100ms ease-out, box-shadow 100ms ease-out;
}
.button:active {
  translate: 0 2px;
  box-shadow: inset 0 1px 2px var(--shade), 0 1px 0 var(--highlight);
}

The step-by-step version of this button, including dark mode, Tailwind and a whole kit of keys and switches from the same tokens, is in how to make a skeuomorphic button in CSS.

What is glassmorphism?

Glassmorphism is frosted, translucent panels: a semi-transparent fill, a thin light border and backdrop-filter: blur() over a colourful background. The name caught on around 2020. Apple's Liquid Glass, introduced in 2025, is a newer relative that also refracts and reflects what's behind it. Glass is a surface style rather than a control style, so it combines with the others: a glass panel can hold flat or skeuomorphic buttons.

.button {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.625rem;
  font: 600 0.9375rem/1 system-ui, sans-serif;
  cursor: pointer;
  border: 1px solid oklch(1 0 0 / 0.45);
  background: oklch(1 0 0 / 0.18);
  color: white;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), 0 4px 16px oklch(0 0 0 / 0.15);
}
.button:active {
  background: oklch(1 0 0 / 0.3);
}

Its contrast is not a property of the button at all. It belongs to whatever is behind the glass. The white label above is 4.28:1 over the violet and 1.80:1 where it crosses the amber disc. If you use glass, put it over quiet backdrops, raise the fill's opacity behind text, or check contrast against the brightest thing that can scroll underneath.

The same switch in four styles

A switch shows the styles' differences more clearly than a button, because its only job is to show a state. All four use the same skeleton, a real checkbox with role="switch" laid over a track and a thumb, and differ only in paint. Flip each one, with the mouse or with Tab and Space.

/* The skeleton every style shares: a real checkbox laid over a track and thumb. */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 600 0.9375rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch .track {
  display: block;
  width: 3rem;
  padding: 0.1875rem;
  border-radius: 999px;
  transition: background-color 150ms ease-out;
}
.switch .thumb {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  transition: translate 150ms ease-out;
}
.switch :checked + .track .thumb {
  translate: 1.25rem 0;
}
.switch:has(:focus-visible) .track {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .switch .track, .switch .thumb { transition: none; }
}

<label class="switch flat">
  <input type="checkbox" role="switch" checked>
  <span class="track"><span class="thumb"></span></span>
  Sync
</label>

Flat

The track changes colour and the thumb slides. Clear, if a little anonymous: the white thumb is 3.64:1 against the grey track and 5.54:1 against the blue.

.flat { color: oklch(0.25 0.02 255); }
.flat .track { background: oklch(0.62 0.01 255); }
.flat :checked + .track { background: oklch(0.52 0.13 255); }
.flat .thumb { background: white; }

Neumorphic

The track is pressed in and the thumb pushed out, both in the page's colour. Only the thumb's position tells you it's on, and the thumb is 1:1 against its track.

.neu { color: #7b8698; }
.neu .track {
  background: #e0e5ec;
  box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
}
.neu .thumb {
  background: #e0e5ec;
  box-shadow: 3px 3px 6px #a3b1c6, -3px -3px 6px #ffffff;
}

Skeuomorphic

A recessed track from the same light, a raised thumb with a side and a cast shadow, and a track that fills with colour when it's on. The thumb is 3.05:1 against the off track and 4.65:1 against the on track.

.skeuo { color: oklch(0.25 0.02 255); }
.skeuo .track {
  background: oklch(0.62 0.012 255);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.35), 0 1px 0 oklch(1 0 0 / 0.6);
}
.skeuo :checked + .track { background: oklch(0.52 0.13 255); }
.skeuo .thumb {
  background: linear-gradient(to bottom, white, oklch(0.94 0 0));
  box-shadow: inset 0 1px 0 white, 0 1px 0 oklch(0.75 0 0),
    0 2px 3px oklch(0 0 0 / 0.35);
}

Glassmorphic

A pane of glass for a track that gets more opaque when it's on. Turning it on makes the thumb harder to see, not easier: 3.82:1 off and 2.20:1 on over the violet, and 1.70:1 and 1.40:1 over the amber.

.glass { color: white; }
.glass .track {
  background: oklch(1 0 0 / 0.18);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.35);
  backdrop-filter: blur(12px);
}
.glass :checked + .track { background: oklch(1 0 0 / 0.45); }
.glass .thumb {
  background: oklch(1 0 0 / 0.92);
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.2);
}

Which one should you use?

Use flat for most of the screen and depth for the controls where state and stakes matter.

• Flat for lists, tables, forms and reading.
• Skeuomorphic for the few controls where state and stakes matter: a deploy switch, a spend meter, an on/off with consequences. Mixing the two is the point: depth stands out because the rest is flat.
• Glass for panels and bars that float over content, with the contrast checked against the brightest thing that can pass behind them.
• Neumorphic only with its colours fixed, as in the note above.

If you're building in React, Bevel's skeuomorphic components do the hard parts for you: one light source, transform-only motion, full keyboard and screen-reader support, and dark mode that dims the light rather than inverting the object.

Frequently asked questions

What is the difference between skeuomorphism and neumorphism?

Skeuomorphism makes a control look and behave like a real object: it has its own colour, one light source and real behaviour such as a key that travels when pressed. Neumorphism makes a control the same colour as the page and lifts it with one light and one dark soft shadow. The practical difference is contrast: skeuomorphic controls stand apart from the page, neumorphic ones blend into it.

What is neumorphism in UI?

Neumorphism, or soft UI, is a style that appeared on Dribbble around 2019. Buttons and cards are the same colour as the background and look extruded from it, drawn with a light shadow on one side and a dark shadow on the other. Pressed controls flip those shadows inward.

Is neumorphism the same as neomorphism?

Yes. Neomorphism is a common alternative spelling of neumorphism, a contraction of new skeuomorphism. Both names describe the same soft, same-colour extruded style.

Is neumorphism accessible?

Usually not as it's typically drawn. In the example on this page the label measures 2.91:1 against the button, below the 4.5:1 WCAG asks for text, and the switch thumb measures 1:1 against its track, so on and off look nearly alike. Giving the control its own colour and a darker label fixes most of it.

What is the difference between skeuomorphism and flat design?

Flat design removes depth and texture and shows controls with colour and type alone. Skeuomorphism keeps depth, light and physical behaviour, so you can see what is pressable and what state it's in. Flat suits dense, text-heavy screens; skeuomorphism suits the few controls where state or stakes matter, and the two mix well.

What replaced skeuomorphism?

Flat design. Microsoft's Metro style on Windows Phone 7 in 2010 and Apple's iOS 7 in 2013 dropped textures and simulated materials, and most of the industry followed. Google's Material Design, introduced in 2014, kept the flat look but added shadows for elevation back.

What is glassmorphism?

Glassmorphism is a style of frosted, translucent panels: a semi-transparent fill, a thin light border and backdrop-filter: blur() over a colourful background. It's a surface style rather than a control style, and its contrast depends on what sits behind the glass.

Is Apple's Liquid Glass the same as glassmorphism?

Not quite. Liquid Glass, introduced at WWDC in 2025, is a translucent material that also refracts and reflects what is behind it. It shares glassmorphism's translucency and has the same contrast risk over bright or busy content.