JavaScript is off, so every pattern is shown stacked below. With it on, these become tabs.
Now playing
LIVEFrosted panels blur whatever sits behind them. Here it is flat color blocks, no gradient in sight.
Glassmorphism
Translucent surfaces that blur and lift what sits behind them. It needs a busy backdrop to read, but that backdrop can be flat color blocks, not a gradient.
Use for overlays, modals, and cards over a colorful flat scene.
background: rgba(255,255,255,.16); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255,255,255,.4); border-radius: 20px;
Neumorphism
One flat background color, two shadows: a light one up-left and a dark one down-right. Elements look pressed out of the same clay. Press the button to invert it.
Use sparingly. Beautiful but low-contrast, so it fails accessibility fast. Good for a single hero control.
background: #e0e5ec; box-shadow: 9px 9px 18px #a3b1c6, -9px -9px 18px #ffffff; /* pressed: inset on both */
Claymorphism
Rounded shapes in flat solid color with a big soft drop shadow and two inset shadows, one dark at the bottom and one light at the top. Everything looks squeezable.
Use for playful products, kids apps, and app icons.
background: #ff6b9d; /* flat */ box-shadow: 0 18px 34px rgba(255,107,157,.4), inset 0 -8px 14px rgba(155,30,80,.5), inset 0 10px 16px rgba(255,255,255,.55);
Ship it raw
Hard borders. Zero radius. One offset shadow doing the whole job.
Brutalism
Thick black borders, no rounding, and a solid offset shadow instead of a blurred one. Loud flat color, monospace, unmistakably hand-made.
Use for portfolios, indie tools, anything that wants to look confident and anti-corporate.
border: 3px solid #000; border-radius: 0; box-shadow: 9px 9px 0 #000; /* hard, not blurred */
Neon glow
Stacked text-shadows and box-shadows in a saturated hue on a flat near-black ground, tuned to look like gas tubing. Shadows, not gradients, do the glow.
Use for gaming, nightlife, and music. Keep it to one or two hues.
text-shadow: 0 0 6px #fff, 0 0 16px #ff2ec4, 0 0 34px #ff2ec4, 0 0 60px #ff2ec4;
Texture
feTurbulence over solid
Grain and noise
An inline SVG turbulence filter laid over a solid color at low opacity with an overlay blend. It adds a film-grain tooth that makes flat color feel printed, no gradient needed.
Use for creative studios and editorial pages. Keep opacity under about 0.2.
background: #3a2a66; /* solid */ background-image: url("data:...feTurbulence..."); opacity: .18; mix-blend-mode: overlay;
Bento grid
A grid of rounded cards in mixed sizes, like a bento box. Each cell holds one idea: a stat, a demo, a quote. Fill cells with flat solid color, not gradients.
Use for feature sections and dashboards. Vary the spans, collapse to one column on mobile.
display: grid; grid-template-columns: repeat(4, 1fr); /* cells: grid-column: span 2; grid-row: span 2 */
Swiss
A strict grid, a neutral grotesk, flat white and black, and exactly one accent, usually a red. Order and hierarchy carry the whole page.
Use for editorial, posters, and anything that should read as rigorous and timeless.
color: #111; background: #f3f3f1; font-family: "Helvetica Neue", Arial, sans-serif; /* one accent only: #e4002b */
Color-block
Big rectangles of flat, saturated color separated by heavy rules. No blends, no depth: composition and proportion do the work, in the lineage of Mondrian and the Bauhaus.
Use for bold brand pages, event sites, and anything that wants graphic impact.
display: grid; gap: 8px; background: #111; /* each cell: one flat solid color */ .a { background: #e4002b }
Duotone and halftone
Two flat solid colors and a dot screen. The tone comes from dot size and spacing, the way newsprint fakes shading, not from a gradient. Here the dots are an inline SVG tile.
Use for music, zines, and photography treated as two-color print.
/* SVG dot tile, not a gradient */ background-image: url("data:image/svg+xml,...circle..."); /* two flat inks: #0b3a52 and #ff5a2c */
> compiling ... ok
> flat colors ... on
$
Terminal
Flat dark surface, one monospace face, a phosphor accent, and a blinking cursor. Signals technical, indie, in-the-know. Everything is a solid color with no shading.
Use for developer tools, CLIs, and AI-native products.
background: #0d130f; color: #8ef0b0; font-family: ui-monospace, Menlo, monospace; /* cursor: solid block, blink via steps() */