CSS Neumorphism Playground

A warm sand-toned neumorphic wellness widget built around a breathing orb. Pulsing concentric-ring progress arc in terracotta gradient, three expanding pulse rings tied to the inhale/exhale cycle, animated phase-label transitions (Inhale → Hold → Exhale → Rest), a live countdown timer, cycle-progress dots, and preset duration pills. Cormorant Garamond for editorial calm. Best for meditation apps, wellness brands, mindfulness tools.

A deep-slate dark-neumorphic music player with a spinning vinyl disc featuring real grooves via repeating-radial-gradient. Includes an 18-bar animated EQ visualizer synced to playback state, arc progress scrubber with glowing gradient thumb, tonearm SVG, amber accent label, and a full transport control set (shuffle, prev, play/pause, next, loop). DM Serif Display for warm sophistication. Best for music apps, podcast platforms, audio dashboards.

A cool blue-gray light-neumorphic room control dashboard. Features a live arc-dial temperature control with +/− buttons, a 2×2 device card grid (each with inset toggle switches, active color-stripe headers, and individual accent colors), room selector pills, and a security status bar with pulsing indicator dots. Every device card is fully toggleable. Syne typeface for a clean modern edge. Best for smart-home apps, IoT dashboards, control panels.

A cool-slate showcase panel demonstrating the full neumorphic vocabulary. Section 1 shows the three core shadow states (resting, hover-lifted, pressed-inset) side-by-side with live box-shadow code snippets beneath each. Section 2 is a shapes row — pill, accent-filled, ghost outline, icon squares, FAB, danger, success, plus a spinner-loading state. Section 3 has draggable toggles, neumorphic checkboxes, and a segmented radio control. Syne + DM Sans typefaces. Best for design-system docs, button libraries, component galleries.

A warm-parchment audio mixing console. Interactive range-input scrubber overlaid on a 49-bar waveform that lights up burnt-gold as you drag through the track. The center volume knob is mouse-draggable with SVG tick marks rendered around its perimeter. Five vertical EQ faders are individually draggable with live dB labels (32Hz, 250Hz, 1kHz, 4kHz, 16kHz). Six rotary mini knobs along the bottom row control Bass, Treble, Reverb, Delay, Width, Drive. Playfair Display + Space Mono. Best for music production tools, DAW dashboards, audio plugins.

A sage-mist neumorphic form panel. Every input is a sunken pocket via deep inset shadows. Section 1: a pill search bar with active-clear button + filter chips. Section 2: a 2-column field grid demonstrating neutral / valid (green ring) / invalid (red ring) states, a password field with show/hide toggle + 4-segment strength bar, a styled native select, and a textarea. Section 3: neumorphic checkboxes and a radio group. Email field runs real blur validation. Mulish + DM Mono. Best for sign-up flows, settings pages, profile editors.

The first dark-neumorphic widget in the collection — deep charcoal with glowing teal accents. Left column: 3-ring embossed power button that glows on activation, a live status readout, and 4 scene presets. Center: full thermostat arc-dial with SVG tick marks in a teal-to-amber gradient, live ± temperature buttons, 4 mode chips (Cool/Heat/Fan/Auto), and 3 interactive sliders (brightness, fan speed, humidity). Right column: 6 device toggle cards with animated pill switches that emit a teal glow when on. Five draggable mini rotary dials along the bottom row. Rajdhani + Share Tech Mono. Best for smart-home hubs, IoT dashboards, building automation.

A champagne-toned luxury banking dashboard. The centerpiece is a dark gradient credit card with an animated gold shimmer sweep, an EMV chip with PCB-line detail, masked card-number dots, and a 3D tilt effect on hover. Left column: total balance with up/down change indicator, three stat tiles (Income / Spent / Saved). Right column: three-layer concentric spending ring chart, four category bars, four transactions with debit/credit color coding, and five quick-action buttons including a gold-filled primary CTA. Cormorant Garamond serif for the luxury banking tone. Best for fintech apps, wealth dashboards, banking UIs.

A warm-cream desk calculator where every button is a fully extruded neumorphic circle with a CSS specular shine highlight at the top-left. Pressing triggers an inset shadow flip plus a ripple-ring animation expanding outward. The display is a deep-inset panel with a scanline grid overlay and smooth font-size scaling for long numbers. Operator keys (÷ × − +) are styled in burnt amber, function keys (AC ± %) in slate-gray with a slightly recessed background. The = key spans two columns as a pill-shaped amber gradient. Full keyboard input support — type numbers, operators, Enter, Escape directly. Space Mono numerals + Nunito keys. Best for calculator tools, finance widgets, conversion utilities.

Five asymmetric weather widgets in a sky-mist palette. A main weather card spans two rows with a floating-animated weather emoji, 5-day forecast pills with mini fill bars, and a live stats strip. A real-time clock widget renders both digital (hours/minutes/seconds) and an analog face with CSS-positioned hands updating every second. A sunrise arc traces a gold SVG path with a glowing sun dot at the current position. A semicircular humidity gauge and a wide air-quality widget with five individual pollutant bars round out the bottom row. Nunito + Space Mono. Best for weather apps, dashboard widgets, IoT environmental sensors.

A pure-CSS showcase of soft-UI form controls with zero JavaScript. Style A: concave dimple radios — a sunken circle with a dot that bounces in using cubic-bezier(0.34, 1.56, 0.64, 1) spring easing on :checked. Style B: horizontal pill-select groups + a vertical icon pill variant — both invert from inset-track to extruded-active on :checked. Style C: card radios with a floating badge that fills from gray to indigo and reveals a white center dot. Checkboxes mirror the pattern — dimple box with CSS-drawn checkmark (border-right + border-bottom), stamp pills with animated tick circles, and card checkboxes with a green gradient fill. Raleway + DM Mono. Best for design-system docs, form pattern libraries, settings panels.

A rose-parchment profile layout. The main profile card uses a triple-layer avatar mount: outer extruded ring → inset groove ring → gradient avatar, so the portrait feels poured into the background rather than placed on top. A pulsing green presence indicator adds life. Deeply inset stats strip, individually extruded tag pills, five social hover-lift buttons, and a gradient follow CTA. A large pull-quote testimonial sits beside it with a decorative 120px ghost quotation mark. Four mini connection cards below each have their own embedded circular avatar and a neumorphic connect button. Playfair Display + DM Sans. Best for portfolios, team pages, social profiles.

The exact dark-neumorphic formula in action — deep navy with shadow 15% darker / highlight 10% lighter. Three concentric system-monitor rings glow with neon teal, electric violet, and hot pink using filter:drop-shadow layered beneath feGaussianBlur SVG filters. Notifications use colored left-border glows that bleed into the card surface. A live JS clock in teal with luminous text-shadow. An embedded code-snippet widget explains the exact CSS variable formula. A music disc uses repeating-radial-gradient grooves. The bottom metrics grid shows four neon accent colors with sparkline bars, each with a matching box-shadow glow. Exo 2 + JetBrains Mono. Best for dev dashboards, gamer interfaces, futuristic admin panels.