By rssfeeds-admin 
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.jsexposes 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>
The post Minimal Neumorphic UI Kit in Pure CSS – Tactile CSS appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.