Minimal Neumorphic UI Kit in Pure CSS – Tactile CSS

Category: CSS & CSS3 | March 10, 2026
0 Comment
Authorliliang-cn
Last UpdateMarch 10, 2026
LicenseMIT
Tags
Views55 views
OfficialGo to website
Live DemoDownload
Minimal Neumorphic UI Kit in Pure CSS – Tactile CSS

Tactile CSS is a pure CSS neumorphic UI kit that applies raised, sculpted, and clay-style shadow effects to standard HTML elements through a single stylesheet.

It currently comes with three shadow styles (outer, inner, and clay) and six pre-built themes (Classic, Mono, Iron, Paper, Terminal, and Warm) that cover everything from dark cast-iron to warm retro tones.

More Features:

  • Zero dependencies: Pure CSS. No JavaScript, no build step, no framework required.
  • Tailwind CSS plugin: An optional plugin for tailwind.config.js exposes Tactile shadows and color tokens as Tailwind utility classes.
  • CSS custom properties throughout: Every color, offset, blur radius, and transition value is a CSS variable.
  • Full component library: Buttons, inputs, cards, FABs, segmented controls, keypads, keyboards, progress tracks, sliders, radial gauges, modals, toasts, and more.
  • Tiny footprint: ~22KB minified.

How To Use It:

1. Installation.

<!-- Load Tactile CSS from jsDelivr CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tactile-css/dist/tactile.min.css">
<!-- From unpkg CDN -->
<link rel="stylesheet" href="https://unpkg.com/tactile-css/dist/tactile.min.css">
# NPM
$ npm install tactile-css
// Then import it in your entry file:
import 'tactile-css/dist/tactile.min.css';

2. Add the tactile class to <body> (or any wrapper element). This applies the background color from the active theme and sets the base font stack.

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tactile-css/dist/tactile.min.css">
</head>
<!-- The 'tactile' class applies --tactile-bg as the page background -->
<body class="tactile">
  <!-- Outer shadow: element appears raised above the surface -->
  <div class="tactile-outer p-6 rounded-xl">
    Raised card
  </div>
</body>
</html>

3. Tactile’s entire visual system rests on three CSS class families. Each can take a size modifier: tactile-sm, tactile-lg, or tactile-xl.

Outer raised, elevated look

<!-- Default raised depth -->
<div class="tactile-outer">Profile card</div>
<!-- Smaller offset, lighter shadow -->
<div class="tactile-outer tactile-sm">Compact badge</div>
<!-- Deeper offset, heavier shadow -->
<div class="tactile-outer tactile-lg">Feature panel</div>

Inner sculpted, recessed look

<!-- Default inset depth  good for inputs and search fields -->
<div class="tactile-inner">Search area</div>
<!-- Small inset for tight UI contexts -->
<div class="tactile-inner tactile-sm">Compact inset</div>

Clay claymorphism, inflated balloon look

The clay style uses a layered triple shadow: a soft outer drop shadow, a subtle inner dark shadow, and a bright inner highlight. The result is a soft, inflated appearance.

<!-- Default clay depth -->
<div class="tactile-clay">Notification bubble</div>
<!-- Larger clay depth for hero elements -->
<div class="tactile-clay tactile-lg">Feature highlight</div>

4. Switch themes by setting a data-theme attribute on <html> or any wrapper. The change cascades through all child components automatically. Available theme values:

  • classic: Soft gray-blue (default).
  • mono: Black and white minimalist.
  • iron: Dark cast iron with orange accent good for fitness or dark dashboard UIs.
  • paper: Warm paper tones, ideal for note-taking or reading interfaces.
  • terminal: GitHub dark style with blue accent.
  • warm: Warm retro palette with terracotta accent.
<!-- Apply the Iron theme to the entire page -->
<html data-theme="iron">
<!-- Scope a single section to the Paper theme -->
<section data-theme="paper">
  <div class="tactile-card tactile-outer">Reading card</div>
</section>
...

5. All design tokens are exposed as CSS variables on :root. Override them globally or scope them to a specific data-theme selector.

:root {
  /* Background and surface colors */
  --tactile-bg: #e0e5ec;
  --tactile-surface: #e0e5ec;
  /* Brand colors */
  --tactile-primary: #8B5CF6;
  --tactile-primary-light: #A78BFA;
  --tactile-primary-dark: #6D28D9;
  /* Text colors */
  --tactile-text: #374151;
  --tactile-text-muted: #6b7280;
  --tactile-text-inverse: #ffffff;
  /* Shadow colors — the core of the neumorphic effect */
  --tactile-light-shadow: rgba(255, 255, 255, 0.8);
  --tactile-dark-shadow: rgba(163, 177, 198, 0.6);
  --tactile-primary-light-shadow: rgba(255, 255, 255, 0.25);
  --tactile-primary-dark-shadow: rgba(109, 40, 217, 0.2);
  /* Shadow geometry */
  --tactile-offset: 6px;
  --tactile-blur: 12px;
  /* Transitions */
  --tactile-transition: all 0.2s ease;
  --tactile-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Border radii */
  --tactile-radius-sm: 6px;
  --tactile-radius-md: 12px;
  --tactile-radius-lg: 20px;
  --tactile-radius-full: 9999px;
  /* Semantic colors */
  --tactile-success: #10B981;
  --tactile-danger: #EF4444;
  --tactile-warning: #F59E0B;
  --tactile-info: #3B82F6;
}

6. Override individual variables to adapt any existing theme:

/* Swap in a coral primary across the entire page */
:root {
  --tactile-primary: #f43f5e;
  --tactile-primary-light: #fb7185;
  --tactile-primary-dark: #be123c;
  --tactile-bg: #f1f5f9;
}

7. Or build a named theme and activate it with data-theme:

/* Define a custom "ocean" theme */
:root[data-theme="ocean"] {
  --tactile-bg: #0f172a;
  --tactile-surface: #1e293b;
  --tactile-primary: #38bdf8;
  --tactile-primary-light: #7dd3fc;
  --tactile-primary-dark: #0284c7;
  --tactile-text: #e2e8f0;
  --tactile-text-muted: #94a3b8;
  --tactile-text-inverse: #0f172a;
  --tactile-light-shadow: rgba(56, 189, 248, 0.1);
  --tactile-dark-shadow: rgba(0, 0, 0, 0.5);
}
<!-- Activate the ocean theme on a specific section -->
<section data-theme="ocean" class="tactile">
  <div class="tactile-card tactile-outer">Ocean-themed card</div>
</section>

Tailwind CSS Integration:

1. Installation.

# NPM
$ npm install tactile-css tailwindcss

2. Register the plugin in tailwind.config.js:

// tailwind.config.js
module.exports = {
  plugins: [
    // Register Tactile as a Tailwind plugin
    require('tactile-css/tailwind'),
  ],
}

3. Then combine Tactile shadow classes with Tailwind utility classes in markup:

<!-- Tailwind spacing + Tactile shadow -->
<div class="tactile-outer p-8 rounded-2xl max-w-sm mx-auto">
  <h2 class="text-lg font-bold mb-2">Account Settings</h2>
  <p class="text-sm text-gray-500">Manage your preferences below.</p>
</div>
<!-- Tactile button with Tailwind sizing and font utilities -->
<button class="tactile-button px-8 py-3 rounded-full text-sm font-semibold">
  Update Profile
</button>
<!-- Use extended Tactile color tokens as Tailwind bg classes -->
<div class="bg-tactile-primary text-white p-4 rounded-xl">
  Primary background using Tactile color token
</div>

Changelog:

v0.5.0 (03/10/2026)

  • update

See Also:

You Might Be Interested In:

Leave a Reply