10 Design Styles
Every collection tagged “design styles” — each one a set of hand-coded demos with copy-paste code and a live preview.
Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS
ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link
20 CSS 3D Effects
20 hand-coded CSS 3D patterns covering the transform pipeline reference build, the perspective property versus the perspective function, perspective-origin as the camera position, why transform function order changes the result, backface-visibility on two sided elements, what silently flattens preserve-3d, building a cube from six faces, transform-origin in three dimensions, translateZ versus scale for depth, z-fighting on coplanar surfaces, rotate3d and the transform matrix, plus ring layouts, stacked z-planes, pointer tilt with parallax, a hinged page-turn flipbook, a drag-rotate cube navigator, an extruded synth panel, perspective floor geometry, nested 3D contexts, and helix distribution. 14 demos are pure CSS; 6 use vanilla JavaScript.
22 CSS Brutalism
22 hand-coded brutalist and neubrutalist CSS designs covering the full spectrum of the aesthetic — from the anti-design brutalism of 2014-2018 (raw system fonts, zero border radius, monochrome density, visible structure) through to the neubrutalism of 2021-present (bright pastel fills, thick black borders, hard offset shadows with zero blur, rounded blocks). The neubrutalist half ships SaaS pricing cards with sticker badges, a pastel admin dashboard, signup forms, rotated feature cards, an offset-shadow navbar, a playful button set, a native dialog modal, a testimonial wall, blog cards, chunky toggles, a landing hero, an image gallery, stats panels and a rounded footer. The brutalist half covers product grids, raw form controls, a monochrome data dashboard, a portfolio index, indie SaaS pricing, Windows 95 desktop chrome, editorial long-read and a streetwear catalog. Every design is scoped under a .brt-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
22 CSS Dark Mode UI
22 hand-coded CSS dark-mode UI patterns — prefers-color-scheme root strategy, data-theme attribute override, color-mix token system, light-dark() function, sidebar navigation, dashboard card grid, modal dialog, focus-ring contrast audit, three-state switcher, code editor surface, OLED true black, layered slate, aurora dim and more.
20 CSS Gradient Text Designs
20 hand-coded CSS gradient text effects with live demos — animated flow with @property typed angle, aurora borealis sweep, conic hue spin, per-letter rainbow wave, lava lamp radial, neon pulse glow, outline stroke with transparent fill, metallic chrome/gold/copper, holographic iridescent foil, duotone two-colour fill, texture fills (sunset, starfield, ocean), liquid mercury, hover reveal, checkbox toggle picker, scroll reveal, click ripple, cursor-tracked radial, typewriter loop, glitter sparkle, and crystalline prism. 16 pure CSS + 4 with a tiny vanilla JS snippet — no framework. Modern background-clip text technique with -webkit-prefix fallback, prefers-reduced-motion honoured, MIT licensed.
18 CSS Gradient UI
18 hand-coded CSS gradient UI demos covering the full design-system surface where tier-1 SaaS, Web3, AI, and premium fintech products reach for gradients in 2026: 6-variant gradient button hover lab (shift/sweep/ring/glow/ghost/hue), gradient feature cards with hover lift + shared --tint token, three gradient border techniques compared side-by-side (double-background layering / mask-composite ring / conic-gradient orbit with @property --angle), gradient badges + release-dashboard status pills (PRO/BETA/NEW), gradient search bar + command palette + form inputs with animated underlines, gradient progress bars + barber-pole stripes + conic-gradient loading rings, animated mesh / aurora background with 4 radial blobs + grain overlay, glassmorphism sign-in card over gradient with backdrop-filter, full-page animated linear gradient pan, hero banner with gradient overlay + Patagonia photo, neon / dark-mode glow cards with flickering OPEN sign, gradient text clipping type specimen (aurora/flow/conic numeral), gradient text hover-reveal editorial menu, gradient link underline animation with 4 styles, metallic / gold / chrome / rose-gold gradient text with panning shine (awards invitation aesthetic), radial spotlight cursor-tracking AI console cards (delegated pointermove + rAF throttling), conic-gradient avatar border rings (Instagram story / live / segment / seen / group presence states), and gradient scroll mask fade for horizontal chip rails + vertical changelog. 16 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (progress ticker + cursor coord writer). Every gradient UI is scoped under a unique .cgu-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
20 CSS Liquid Glass Effects
Liquid glass and glassmorphism UI patterns built with backdrop-filter blur, translucent surfaces, and SVG displacement refraction. Covers glass cards, glossy buttons, frosted navbars, gooey toggle switches, blurred modals and dropdowns, pricing tables, login and multi-step form cards, sliders, tooltips, toasts, sidebars, accordions, audio players, and loading skeletons. Semantic HTML, modern CSS, copy-paste ready.
24 CSS Liquid Glass Navbars
iOS 26 floating tab bars, macOS Tahoe menu strips, and visionOS glass panels recreated in pure CSS — 24 liquid glass navigation bars. Covers scroll-to-frost sticky headers, SVG refraction toolbars, sliding capsule active tabs with no JavaScript, Dynamic Island morphing pills, reflective sidebars, cursor-warp interactive navs, and responsive sidebar-to-bottom-tab layouts, plus light/dark, high-contrast, Firefox-fallback, and performance-tuned variants. Semantic HTML, backdrop-filter, copy-paste ready.
14 Material Design CSS Components
14 hand-coded Material Design CSS components covering every production Material Design 3 (Material You) pattern — Material elevated/filled/outlined buttons with ripple, elevated content cards, sidebar + top app bar navigation, floating-label form inputs, dialog modal with backdrop, sortable data table, ripple-driven tabs, removable chips with leading icons, vertical stepper, four tooltip variants, accordion expansion panels, two-line list with leading avatars, the full 500-shade Material color palette swatcher, and a complete responsive app shell with collapsible drawer. All 100% pure CSS — zero JavaScript, zero libraries (no Material UI, no MUI, no Material Components Web, no MDL). Interactive behaviour driven by checkbox / radio state machines + :checked / :has() selectors. Every demo respects prefers-reduced-motion, uses scoped .md-NN__* class names so multiple components coexist on the same page, and ships MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML — zero framework dependencies.
20 CSS Neon Effects
20 hand-coded CSS neon patterns covering the layered glow anatomy of core halo and bloom, filter drop-shadow for irregular and clipped shapes, perceived luminance by hue and why some colours glow while others read muddy, inner glow and faked light emission with inset shadows, animating glow intensity with @property, glow on SVG paths and stroke elements with feGaussianBlur merges, the real paint cost of large blur radii and what to animate instead, accessible neon that keeps text legible on dark grounds, plus button construction, display type glow, pricing tiers, depth falloff scenes, focus glow inputs, active navigation states, flicker timing, a cyberpunk token set, a Tailwind utility recipe, icon glows, a perspective grid, and multi-hue gradient glow. 17 demos are pure CSS; 3 use vanilla JavaScript.
22 CSS Neumorphism
22 hand-coded CSS neumorphism and soft UI patterns covering the dual box-shadow reference build, neumorphism versus glassmorphism compared side by side, raised inset and flat state systems, accessible neumorphism that passes WCAG contrast, deriving both shadow colours from one surface token with color-mix, concave and convex surfaces with gradients, soft UI buttons, toggles and checkboxes, inset input fields, range sliders with inset tracks, circular progress rings, navigation rails, tabs and segmented controls, modals with layered elevation, dashboard widgets, dark mode shadow recalibration, border radius and light angle consistency, the paint cost of large blur radii, a hard shadow neubrutalist hybrid, and an honest guide to when not to use the style. 18 demos are pure CSS; 4 use vanilla JavaScript.