Neo-skeuomorphism: what it is, with live examples

Neo-skeuomorphism, also called skeuomorphism 2.0 or modern skeuomorphism, is the return of light, depth and physical behaviour to interfaces, used where it means something instead of everywhere. The page stays flat; the controls that matter get a body: a switch you can see is on, a meter that runs while it costs you, a cover over the button you mustn't press by accident.

Every example on this page is a working React component or a few lines of CSS. Use them.

Flat vs neo-skeuomorphic: the same switch

The quickest way to see neo-skeuomorphism is one control before and after. Both switches below are the same checkbox with role="switch". The flat one shows its state with colour alone: its white thumb measures 2.00:1 against the grey track and 2.49:1 against the green, under the 3:1 WCAG asks for the parts of a control that show its state. The neo-skeuomorphic one cuts the track into the surface, makes the thumb a small key, and adds a lamp and a printed word. In light mode its thumb measures 3.31:1 off and 4.74:1 on, and you can read its state without relying on colour.

.flat-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 600 0.9375rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.flat-toggle input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.flat-track {
  display: block;
  width: 3rem;
  padding: 0.1875rem;
  border-radius: 999px;
  background: oklch(0.78 0.01 255);
  transition: background-color 150ms ease-out;
}
.flat-thumb {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: white;
  transition: translate 150ms ease-out;
}
.flat-toggle :checked + .flat-track { background: oklch(0.7 0.17 150); }
.flat-toggle :checked + .flat-track .flat-thumb { translate: 1.25rem 0; }
.flat-toggle:has(:focus-visible) .flat-track {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .flat-track, .flat-thumb { transition: none; }
}

<label class="flat-toggle">
  <input type="checkbox" role="switch">
  <span class="flat-track"><span class="flat-thumb"></span></span>
  Auto-deploy
</label>

.neo-toggle {
  --highlight: oklch(1 0 0 / 0.5);
  --shade: oklch(0 0 0 / 0.3);
  --recess: oklch(0.6 0.012 255);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 600 0.9375rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.dark .neo-toggle {
  --highlight: oklch(1 0 0 / 0.15);
  --shade: oklch(0 0 0 / 0.6);
  --recess: oklch(0.42 0.012 255);
}
.neo-toggle input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* The track is cut into the surface. */
.neo-track {
  display: block;
  width: 3rem;
  padding: 0.1875rem;
  border-radius: 999px;
  background: var(--recess);
  box-shadow: inset 0 1px 3px var(--shade), 0 1px 0 var(--highlight);
  transition: background-color 150ms ease-out;
}
/* The thumb is a small key with a side and a shadow. */
.neo-thumb {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  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 var(--shade);
  transition: translate 150ms ease-out;
}
/* A lamp and a printed word say the state, not only the colour. */
.neo-lamp {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: oklch(0.45 0.03 145);
  box-shadow: inset 0 1px 1px var(--shade);
}
.neo-state::after {
  content: "Off";
  font: 600 0.6875rem/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.neo-toggle :checked + .neo-track { background: oklch(0.5 0.13 150); }
.neo-toggle :checked + .neo-track .neo-thumb { translate: 1.25rem 0; }
.neo-toggle:has(:checked) .neo-lamp {
  background: oklch(0.85 0.2 145);
  box-shadow: 0 0 6px oklch(0.85 0.2 145);
}
.neo-toggle:has(:checked) .neo-state::after { content: "On"; }
.neo-toggle:has(:focus-visible) .neo-track {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .neo-track, .neo-thumb { transition: none; }
}

<label class="neo-toggle">
  <input type="checkbox" role="switch">
  <span class="neo-track"><span class="neo-thumb"></span></span>
  Auto-deploy
  <span class="neo-lamp" aria-hidden="true"></span>
  <span class="neo-state" aria-hidden="true"></span>
</label>

The lamp and the word are aria-hidden because the checkbox already tells screen readers whether it is on. They exist for sighted people who don't want to decode a colour.

How neo-skeuomorphism differs from the old skeuomorphism

Old skeuomorphism copied materials; neo-skeuomorphism copies behaviour. The skeuomorphism of 2007–2012 put leather on the calendar, felt on the card table and torn paper in the notes app. The materials were the point, and they didn't make anything easier to use. When iOS 7 removed them in 2013, very little was lost.

A rotary knob that clicks into four positions tells you there are four choices and which one is set, before you read a word. That is information a flat dropdown hides until you open it.

How it differs from neumorphism

Neumorphism is a separate style, not an early version of this one, and it mostly failed on contrast. It appeared around 2019 and made controls look like soft bumps pressed out of a single-colour page. Controls the same colour as the page are hard to see and fail accessibility checks. Neo-skeuomorphic controls stand apart from their surface, like real objects do. There's a side-by-side with measured contrast in skeuomorphism vs neumorphism vs flat design.

Is skeuomorphism coming back? Why now

Yes, for four reasons, and none of them is nostalgia.

• Screens got good enough. On high-density displays, a 1px highlight and a soft shadow look like light, not like a filter. Depth no longer needs textures to be convincing.
• Apple went back to light. Liquid Glass, introduced in 2025, put refraction, highlights and depth back into the most copied interface in the world.
• Software acts on its own. Deploys, payments and AI agents keep running after you look away. Interfaces like that need to show state and stakes at a glance, and physical controls were designed to do exactly that.
• Flat products started to look the same. When every app is built from the same default components, a control with weight and character is memorable.

The five rules of neo-skeuomorphism

1. One light source. All highlights and shadows agree, so different objects sit together on one surface.
2. Depth has to mean something. Raised means pressable, sunk means on or done, a cover means dangerous. If depth doesn't carry information, leave the element flat.
3. Behaviour before texture. Travel, detents, flaps and needles do more than any material. A switch that throws is worth more than a switch with brushed metal.
4. Flat page, tactile controls. The contrast is what makes the controls stand out. A whole screen of objects is the 2010 mistake again.
5. Never only visual. Say the state in words for screen readers, keep text contrast high, and respect reduced motion: things change state immediately instead of animating.

Neo-skeuomorphism examples, and the job each one does

A good neo-skeuomorphic control borrows an object because the object already solved a problem. Each one below is modelled on a real machine, and each does one job a flat control does badly.

Guarded switch: make a dangerous action take two moves

A cover over the switch means you can't flip it by accident: you lift the cover, then flip. If you walk away, the cover drops and the switch goes back to safe. It replaces the confirm dialog people click through without reading.

Annunciator: alerts that wait until someone has seen them

A panel of lamps where every new alarm flashes until it's acknowledged, then stays lit while the condition lasts. An alarm that clears before anyone looks keeps flashing, so nothing passes unnoticed. A toast that fades after five seconds can't promise that.

Vigilance control: keep a person in the loop

A supervised run keeps going only while someone checks in. Miss the window and it warns, then pauses. It suits AI agents that act on their own: supervision becomes something you do, not a setting you forget.

Keysort filter: AND filtering you can see

Edge-notched cards with a hole per attribute. Push needles through the tags you want and only the cards notched for all of them fall free. You see why each record matched, which a list of filter chips doesn't show.

Number wheel: a count you can watch change

Printed drums that roll to each digit, lowest first, like an odometer. When a number changes you see it move and by roughly how much, instead of a figure that silently swaps.

Split-flap board: live status at a glance

A departure board that flips when a deploy moves. The movement draws the eye to what just changed, and the board reads from across a room.

Where neo-skeuomorphism works best

• Settings with a few fixed steps: effort levels, plans, modes. A knob or a lever shows every option at once.
• Feature flags and toggles that should be scannable at a glance, like a bank of DIP switches.
• Live status: a departure board that flips when a deploy moves, a meter for spend.
• Dangerous actions: deploy to production, delete, send money. A cover beats a confirm dialog.
• Alerts and supervision: lamps that wait for acknowledgement, a check-in for a running agent.

How to start

Build one control by hand to learn the light and depth: how to make a skeuomorphic button in CSS and Tailwind takes you from a flat button to one that presses, then builds keys, a switch and a segmented control from the same tokens. Or install finished controls: Bevel is an open-source library of neo-skeuomorphic React components, each modelled on a real object and installed with the shadcn CLI.

Frequently asked questions

What is neo-skeuomorphism?

Neo-skeuomorphism is a design approach that brings light, depth and physical behaviour back to interface controls, but only where they carry meaning. Pages and text stay flat; switches, knobs, meters and dangerous actions get a body that shows their state and stakes at a glance.

What is skeuomorphism 2.0?

Skeuomorphism 2.0 is another name for neo-skeuomorphism, or modern skeuomorphism. Where the skeuomorphism of 2007 to 2012 copied materials such as leather and felt, the 2.0 version copies behaviour: travel, detents, covers, needles and lamps.

Is skeuomorphism coming back?

Yes, in a restrained form. Light, depth and physical behaviour are returning to controls that carry meaning, while layouts and text stay flat. Apple's Liquid Glass, introduced in 2025, put highlights and depth back into iOS. The textures of 2010 are not coming back.

What replaced skeuomorphism?

Flat design replaced it. Microsoft's Metro style on Windows Phone 7 in 2010 and Apple's iOS 7 in 2013 removed textures and simulated materials, and most of the industry followed. Neo-skeuomorphism is a partial return: depth for the controls that need it, flat for everything else.

What's the difference between neo-skeuomorphism and neumorphism?

Neumorphism makes controls the same colour as the page and lifts them with soft shadows, which lowers contrast. Neo-skeuomorphism gives controls their own colour, a clear light source and real behaviour, such as travel and detents.

Is skeuomorphism bad for accessibility?

Not if it's built well. A raised, high-contrast control is often easier to find than a flat one. The risks are low contrast and state shown only through visuals. Fix both by keeping contrast high, stating every state in text, and using real form controls underneath.

Does skeuomorphic UI hurt performance?

Only when it uses images or animates layout. CSS gradients and shadows are cheap, and motion that only uses transform and opacity stays smooth.