22 CSS Design Styles — Themed Collections & Visual Aesthetics
Beyond individual components, CSS defines entire visual languages. This category gathers focused style collections — currently glassmorphism and dark mode UI — with more styles being added.
Untitled UI Pro: a 10,000+ component Figma UI kit · from $129 one-time
Untitled UI · Affiliate link
Modern UI Styles
15 collections
23 Tailwind CSS Dark Mode UI
23 hand-coded Tailwind CSS dark mode UI components for dashboards, settings panels, modals, login forms, code editors and reading layouts. Covers prefers-color-scheme defaults, data-theme and light-dark() overrides, color-mix() design tokens, three-state System/Light/Dark switchers, OLED true-black and warm mocha themes, elevation layers, sidebar navigation, sortable file tables, vertical timelines, glowing buttons, aurora gradient heroes and alert cards.
20 Tailwind CSS Claymorphism
20 Tailwind CSS claymorphism components for dashboards, pricing tables, mobile tab bars, app-icon grids, and product cards. Covers the 3-layer clay box-shadow recipe, squircle corner radii, glassmorphism hybrids, 3D press-and-squish buttons, inset well inputs and search bars, toggle switches and segmented controls, clay badges, popover-API modals, semantic toasts, dark-mode shadow recalibration with light-dark(), and GPU-transform performance tuning.
20 Tailwind CSS Grain Texture
Restaurant menu cards, SaaS hero backgrounds, and photographic overlays lean on grain to kill gradient banding and add tactile depth. Covers SVG feTurbulence noise, baseFrequency and numOctaves control, data-URI textures with no image request, mix-blend-mode composites, feColorMatrix tinting, anti-banding gradient heroes, vignette overlays, halftone and Bayer dither shading, letterpress and risograph print effects, woven fabric surfaces, and a reduced-motion static fallback.
20 Tailwind Liquid Glass Effects
Browse 20 Tailwind liquid glass effects with live demos and copy-paste code. Frosted cards, gooey toggles, SVG displacement backgrounds, glossy buttons.
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.
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.
22 CSS Glassmorphism
22 hand-coded CSS glassmorphism designs — backdrop-filter blur, saturate vibrancy, visionOS depth, SVG refraction, adaptive theming, browser fallback, and 12 production surfaces (card, modal, navbar, tab bar, sidebar, input, toggle, search, refraction, tinted, stacked).
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.
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.
16 CSS Frosted Glass Effects
16 production CSS frosted glass effect designs with live demos and copy-paste code — a full-viewport login modal, dashboard overlay panel, sticky glassmorphism navbar with blur-on-scroll via IntersectionObserver, sidebar navigation menu, media-player footer overlay, animated login/signup form, split-panel contact form UI, profile info card, credit card payment UI, product display card, crypto finance dashboard, Apple-style weather widget, glass music player UI, translucent calendar widget, frosted glass modal popup, and a VisionOS-style floating app dock. Every demo uses backdrop-filter blur + saturation 180% on a colorful animated backdrop for real glassmorphism, with a @supports fallback so browsers without support stay readable. Scoped under .fg-NN, copy-paste ready.
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.
20 CSS Grain and Noise Textures
20 hand-coded CSS grain and noise textures built on the SVG feTurbulence primitive, inlined as a data URI so there is no image request and no tiling PNG. Opens with the parameter sheet — type, baseFrequency, numOctaves, seed and stitchTiles each isolated on its own plate — then grain size control, data URI encoding, opacity and blend mode scales, colour tinting with feColorMatrix, and a measured look at paint cost and byte size. Applies the technique to real surfaces: dithering a gradient to kill colour banding, film grain over a vignetted photograph, tactile card and button surfaces, full-bleed hero backgrounds, noise layered against backdrop-filter, and textured section dividers. Closes with named print looks — halftone dot, ordered Bayer dither, letterpress paper stock, risograph misregistration and woven fabric — plus dark mode recalibration and a reduced-motion fallback. 19 demos are pure CSS; 1 uses vanilla JavaScript.
20 CSS Claymorphism
20 hand-coded CSS claymorphism designs covering the three-layer shadow recipe that defines the style, inner highlight and inner shadow layering, the border radius scale that makes shapes read as puffy rather than merely rounded, claymorphism compared side by side with neumorphism, a clay and glassmorphism hybrid, single light-source discipline across a layout, depth tiers for visual hierarchy, a Tailwind implementation with both arbitrary values and theme tokens, squishy button press states, toggles and checkboxes, inset input wells and search bars, badge and pill systems, cards, popover-based modals, pricing tables, mobile tab bars, app icon grids, toast and alert bubbles, dark mode shadow recalibration, and the paint cost of animating shadows. 19 demos are pure CSS; 1 uses vanilla JavaScript.
Classic & Themed Styles
7 collections
20 Tailwind CSS Minimalist UI
A collection of Tailwind CSS minimalist UI patterns for SaaS dashboards, ecommerce product cards, portfolios, article layouts, landing sections, and mobile app screens. Covers modular type scales from a ratio variable, single-ink hierarchy, system font stacks, optical alignment, spacing from one base unit, vertical rhythm, one-accent restraint, grayscale contrast ramps, removable borders, and tone-only elevation without shadows.
14 Material Design Components in Tailwind CSS
14 Material Design components in Tailwind CSS covering Material 3 buttons and FABs, elevated and outlined cards, bottom navigation bars, rails and drawers, floating-label text fields, dialogs and bottom sheets, sortable data tables, tabs with a sliding indicator, filter chips, steppers, tooltips, expansion panels on the details element, list rows, a theme switcher, and a responsive app shell with a scroll-elevated top bar.
20 Tailwind Retro UI
Browse 20 Tailwind retro UI components with live demos and copy-paste code. CRT scanlines, Windows 95 chrome, pixel art buttons, vaporwave grids.
20 CSS Retro UI
20 hand-coded retro and vintage UI designs reproducing real computing eras — CRT scanlines and curvature, pixel-art scaling, dithering, one-bit bevels, Windows 95, Classic Mac System 7, MS-DOS text mode, Teletext, phosphor monitors, 8-bit HUDs, vaporwave, Y2K aqua, and a draggable desktop portfolio. Every effect built from first principles, no retro CSS library.
20 CSS Minimalist UI
20 hand-coded CSS minimalist UI patterns covering the decisions behind a restrained interface — modular type scales, spacing from a single base unit, hierarchy without colour, optical alignment, a one-accent restraint budget, grayscale contrast ramps, elevation without shadows, and where minimal interfaces fail accessibility. No webfonts, system font stacks only.
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.
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 <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no Material UI, no MUI, no Material Components Web, no MDL). Interactive behaviour driven by checkbox / radio state machines + <code>:checked</code> / <code>:has()</code> selectors. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.md-NN__*</code> 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.