CSS Reproduces 23 Design Styles: A Cost Ladder and Fallback Playbook from Skeuomorphism to Liquid Glass

Sixteen months after Liquid Glass went live, Apple added a switch for it in iOS 26.1. This post reproduces 23 design styles from 2007–2028 with CSS and answers three engineering questions:

1. What is the reproduction code for each style (runnable directly)
2. Which approaches have fallbacks and which are running bare
3. Where each style should be used, and where it should absolutely not be used

All code is in the GitHub repository (at the end); a single-file HTML can be opened offline.

The Cost Ladder: An Engineering Iron Rule

Era	Style	Reproduction Cost
2007–2013	Skeuomorphism	One set of layers/shadow stacks per material
2013–2015	Flat	One hex
2020–2021	Glassmorphism	One line of backdrop-filter
2025	Liquid Glass	A system switch (Web side still needs an approximation)
2024 onward	AI-generated	One prompt sentence

Engineering conclusion: the unit cost of texture will only fall, not rise. So the question for whether to follow a new style is not whether it looks good, but whether its cost structure will keep collapsing.

Core Code: Four Patterns You Must Master

1. Glassmorphism (has a fallback, production-ready)

.glass {
  /* The three-piece set: translucent fill + background blur + hairline border */
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 16px;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(28,30,38,.92); } /* fallback solid color */
}

This is the most important block in the whole reproduction. Glassmorphism outlives neumorphism for one reason: it has a fallback. The @supports query lets unsupported browsers degrade to a translucent solid color, and the UI still works.

2. Neumorphism (contrast killer, be careful in production)

.neu {
  background: #e0e5ec;      /* must match the page background */
  border-radius: 14px;
  box-shadow: 8px 8px 16px #b8bec7,
              -8px -8px 16px #ffffff;
}

EULE Institute measured neumorphic elements at only 1.2:1–1.5:1 contrast against the background; WCAG 2.2 AA requires 3:1 for UI components. The embossed look and contrast are mathematically mutually exclusive. It is fine for portfolios; interactive controls in production need to pass a contrast test first.

3. Liquid Glass approximation (with a transparency-preference fallback)

.lg {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) brightness(1.1);
  border-radius: 22px;
  /* Glass edge: bright top, dark bottom, simulating thick-edge refraction */
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55),
              inset 0 -1.5px 0 rgba(255,255,255,.14),
              0 10px 40px rgba(0,0,0,.28);
}
@media (prefers-reduced-transparency: reduce) {
  .lg { background: rgba(22,24,32,.94); backdrop-filter: none; }
}

Two details Apple has that CSS does not: system-level GPU compositing and real-time ambient-light adaptation. The Web side can only approximate. Apple's own guidance also advises against using it on content layers: skip data screens (tables, forms), and use it for navigation and overlays.

4. Anti-AI defaults (write decisions into tokens)

/* Anti-pattern: all three defaults appearing together = nobody made a decision */
.hero-ai {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(99,102,241,.45);
}
/* Fix: write decisions into tokens, let CI block the defaults */
:root {
  --brand: oklch(62% .19 28);  /* a real brand color */
  --radius-card: 6px;          /* restrained radius */
}

Ryo Lu, design lead at Cursor, called out the three ugly faces of AI interfaces: purple gradients, exaggerated shadows, and predictable fonts. Wes Bos calls them the four horsemen. The countermeasure: design tokens written in stone plus CI pattern linting that fails the build.

Selection Checklist (engineering view)

Scenario	Use	Don't use
B2B backend / data screens	Flat / Material / dark	Liquid glass, neumorphism, acid
Overlay navigation	Glass (must have @supports fallback)	Translucency without fallback
Marketing hero	Big type / aurora mesh / bento	AI default three-piece
Portfolio / event pages	Neubrutalism, acid, CRT	—
Explanatory content	2.5D isometric, bento	Purely decorative 3D

Three general rules:

1. For any translucent effect, write the fallback first (@supports or prefers-reduced-transparency)
2. Run a contrast test before launch; 3:1 is the lifeline for UI components (WCAG 2.2 AA)
3. Put a performance budget on 3D/animation: 38% of users leave because of ugliness, 39% because it is too slow; slow kills faster than ugly.

Full List of 23 Styles

Each style's runnable CSS has a corresponding file in the repository; open it locally to verify.

1. Skeuomorphism (2007–2013, prologue)

.skeuo {
  background: linear-gradient(#9c6b3f, #7a4f2a);
  color: #f7ead7;
  border: 1px solid #5d3a1c;
  outline: 1px dashed rgba(255,255,255,.35);
  outline-offset: -4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),
              0 2px 8px rgba(0,0,0,.45);
}

2. Flat Design (2013–2015)

.btn-flat {
  background: #007aff;   /* iOS 7 system blue */
  color: #fff;
  border: none;           /* no border */
  border-radius: 6px;     /* light radius, no shadow-based layering */
  padding: 10px 22px;
  font-weight: 600;
}

3. Flat 2.0 + Long Shadow (2015–2016)

.flat2 {
  background: #ff5a5f;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255,90,95,.4); /* colored shadow */
}
.longshadow { position: relative; background: #e74c3c; }
.longshadow::after {      /* 45° gradient pretending to be a shadow */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(45deg,
    rgba(0,0,0,.22) 45%, transparent 46%);
  transform: translate(10px, 10px);
  z-index: -1;
}

4. Material Design (Google, 2014–2016)

.card-material {
  background: #fff;
  border-radius: 4px;
  /* Elevation: two shadow layers, near one sharp, far one blurry */
  box-shadow: 0 1px 3px rgba(0,0,0,.12),
              0 1px 2px rgba(0,0,0,.24);
}
.fab {
  width: 56px; height: 56px; border-radius: 50%;
  background: #ff4081; color: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.3);
}

5. 2.5D / Isometric (2016–2018)

.iso-stage { perspective: 800px; }
.iso-plane {
  transform: rotateX(55deg) rotateZ(45deg);
  transform-style: preserve-3d;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 1px, transparent 1px 40px),
    linear-gradient(160deg, #1f2937, #0f172a);
}

6. Duotone (2017–2018)

.duotone { position: relative; }
.duotone img { filter: grayscale(1) contrast(1.1); }
.duotone::after {         /* two brand-color layers */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1db954, #191414);
  mix-blend-mode: screen; /* Spotify recipe */
}

7. Neumorphism (2019–2020)

.neu {
  background: #e0e5ec;      /* must match the page background */
  border-radius: 14px;
  box-shadow: 8px 8px 16px #b8bec7,
              -8px -8px 16px #ffffff;
}
.neu:active {
  box-shadow: inset 4px 4px 8px #b8bec7,
              inset -4px -4px 8px #ffffff;
}

8. Glassmorphism (2020–2021)

.glass {
  /* The three-piece set: translucent fill + background blur + hairline border */
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 16px;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(28,30,38,.92); } /* fallback solid color */
}

9. Dark Mode (2019–2021)

:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;   /* avoid pure black, it bleeds light */
    --fg: #e6e6e6;   /* avoid pure white, it is harsh */
  }
}

10. Neubrutalism (2020–2023)

.neo {
  background: #ffe219; color: #141414;
  border: 3px solid #141414;   /* thick black border */
  border-radius: 0;            /* square corners */
  box-shadow: 6px 6px 0 0 #141414; /* hard shadow, zero blur */
}
.neo:active {
  transform: translate(6px, 6px);
  box-shadow: none;            /* pressed = shadow eaten */
}

11. Claymorphism (2021–2022)

.clay {
  background: #ffd9e3;
  border-radius: 26px;
  /* two inner, one outer: inflated feel */
  box-shadow: inset 5px 5px 10px rgba(255,255,255,.75),
              inset -5px -5px 12px rgba(203,92,124,.35),
              14px 14px 28px rgba(203,92,124,.22);
}

12. Aurora / Mesh (2021–2022)

.aurora {
  min-height: 100vh;
  background:
    radial-gradient(42% 55% at 18% 24%, #7c3aed 0%, transparent 62%),
    radial-gradient(46% 46% at 82% 18%, #22d3ee 0%, transparent 58%),
    radial-gradient(48% 48% at 62% 82%, #f472b6 0%, transparent 58%),
    #0b1020;
}
/* Advanced: after background-size: 200% 200%, use
   animation: drift 18s ease-in-out infinite alternate; */

13. Bento Grid (2022–2023)

.bento {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 110px;
}
.bento .span2 { grid-column: span 2; }
.bento .row2  { grid-row: span 2; }
.bento > * { border-radius: 18px; }

14. Acid / Y2K Grunge (2022–2024)

.acid {
  background: #0a0a0a;
  color: #d9ff00;
  font-family: "Arial Black", sans-serif;
  text-transform: uppercase;
  text-shadow: 2px 0 #ff00c8, -2px 0 #00fff9; /* chromatic aberration */
  filter: contrast(1.4);                        /* chrome noise */
}

15. Retro CRT (2022–2024)

.crt {
  background: #001100;
  color: #33ff66;
  font-family: "Courier New", monospace;
}
.crt::after {          /* 2px scanline */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 2px);
  pointer-events: none;
}

16. 3D Element Revival (2023–2024)

.hero3d { perspective: 900px; }
.hero3d .card {
  transform: rotateY(-14deg) rotateX(8deg);
  transition: transform .4s ease;
}
.hero3d:hover .card { transform: rotateY(0) rotateX(0); }
/* Advanced: Spline <spline-viewer> or R3F;
   remember lazy loading + degradation for low-end devices */

17. Big Type (2023–2024)

.bigtype h1 {
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
}

18. Frutiger Aero Revival (2024–2026)

.aero-orb {
  width: 96px; height: 96px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #cdeeff 0%, #4aa8e8 100%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 6px 18px rgba(30,120,190,.35);
}

19. AI Slop (2024–2026, object of reflection)

/* Anti-pattern: all three defaults appearing together = nobody made a decision */
.hero-ai {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(99,102,241,.45);
}
/* Fix: write decisions into tokens, let CI block the defaults */
:root {
  --brand: oklch(62% .19 28);  /* a real brand color */
  --radius-card: 6px;          /* restrained radius */
}

20. Liquid Glass (2025–2026, Web approximation)

.lg {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) brightness(1.1);
  border-radius: 22px;
  /* Glass edge: bright top, dark bottom, simulating thick-edge refraction */
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55),
              inset 0 -1.5px 0 rgba(255,255,255,.14),
              0 10px 40px rgba(0,0,0,.28);
}
@media (prefers-reduced-transparency: reduce) {
  .lg { background: rgba(22,24,32,.94); backdrop-filter: none; }
}

21. Spatial UI (2024–2026)

.spatial-win {
  border-radius: 24px;        /* visionOS windows default to large radius */
  background: rgba(20,20,24,.55);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
/* Web approximation = glass + large radius + deep shadow;
   the real-device three-piece set is Window / Volume / Space */

22. Ambient UI (2027–2028, prediction)

/* Prediction: interfaces adapt to ambient light and scene,
   and the act of opening an app itself is disappearing */
.ambient { background: transparent; }
@media (prefers-contrast: more) {
  .ambient { --chrome: transparent; --ink: #000; }
}
.ambient .card { border: none; box-shadow: none; }

23. Generative UI (2027–2028, prediction)

/* Prediction: layout is generated by an agent based on intent;
   your design system only renders, it does not hardcode */
.gen-card { container-type: inline-size; }
@container (min-width: 480px) {
  .gen-card { grid-template-columns: 1fr 1fr; }
}
/* A2UI: the agent outputs structured layout messages,
   the client renders, and the agent's code is not executed */

Original technical blog · Open-source project sharing · AI full-stack creation community idao.fun