Additional utility classes for Tailwind CSS — glassmorphism, text gradients, glow effects, masks, and design tokens. One plugin, zero config, works with any Tailwind project.
Building glassmorphism from scratch means writing 10+ lines of backdrop-filter, rgba, and border properties every time. This plugin gives you .glass, .glow-4, .text-gradient, and more — drop-in classes that just work.
npm install @3ni8ma/tailwind-pluginAdd to your tailwind.config.js:
import glassmorphism from '@3ni8ma/tailwind-plugin'
export default {
plugins: [glassmorphism],
}import glassmorphism from '@3ni8ma/tailwind-plugin'
export default {
plugins: [
glassmorphism({ glowColor: '16, 185, 129' }), // emerald
],
}| Class | Effect |
|---|---|
.glass |
Frosted glass — light, subtle transparency |
.glass-dark |
Frosted glass — dark mode friendly |
.glass-strong |
Heavier blur + more opacity for emphasis |
<div class="glass rounded-2xl p-6">
<h2 class="text-gradient bg-gradient-to-r from-pink-500 to-violet-500">
Frosted card
</h2>
</div>| Class | Effect |
|---|---|
.text-gradient |
Transparent fill — pair with any gradient background |
.text-gradient-animate |
Same, with a looping gradient-shift animation |
.text-shadow |
Subtle drop shadow |
.text-shadow-lg |
Heavier drop shadow |
<h1 class="text-gradient bg-gradient-to-r from-cyan-500 to-blue-500 text-4xl font-bold">
Gradient heading
</h1>| Class | Effect |
|---|---|
.mask-fade-bottom |
Fade out towards bottom |
.mask-fade-top |
Fade out towards top |
.mask-fade-sides |
Fade out on left and right edges |
<img class="mask-fade-bottom w-full" src="hero.jpg" alt="" />Dynamic — uses Tailwind's spacing scale:
<button class="glow-4 bg-blue-600 text-white px-6 py-3 rounded-lg">
Glowing button
</button>
<button class="glow-8 bg-emerald-600 text-white px-6 py-3 rounded-lg">
Bigger glow
</button>| Class | Effect |
|---|---|
.border-gradient |
Gradient border (pink → indigo → cyan) |
.noise |
Subtle noise texture overlay |
.backdrop-blur-sm |
4px backdrop blur |
.backdrop-blur-lg |
16px backdrop blur |
.backdrop-blur-xl |
24px backdrop blur |
MIT