Glass morphism, gradients, shadows, blur, borders, cursor effects. Every effect with exact CSS/Tailwind. Use when specifying visual effects for any screen — glass cards, gradient borders, glow, vignettes, halftone patterns, shimmer loading. Copy-pasteable CSS for every effect.
Reference this skill whenever a design spec needs visual effects. Every effect is copy-pasteable CSS with Tailwind equivalents.
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
Liquid Glass Strong (elevated modals, emphasized cards):
.liquid-glass-strong {
background: rgba(255, 255, 255, 0.03);
background-blend-mode: luminosity;
backdrop-filter: blur(12px);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
}
/* Same ::before as liquid-glass but padding: 2px and higher opacity stops */
Tailwind shortcut (no pseudo-element, simpler): bg-white/[0.01] backdrop-blur-sm border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]
For cards, panels, and containers on dark backgrounds:
.arena-glass {
background: rgba(17, 24, 39, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(30, 41, 59, 0.8);
border-radius: 12px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.03),
0 4px 24px rgba(0,0,0,0.3);
}
Tailwind: bg-gray-900/70 backdrop-blur-xl border border-slate-800/80 rounded-xl shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_4px_24px_rgba(0,0,0,0.3)]
Animated gradient border that appears on hover using mask-composite:
.gradient-border {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(59,130,246,0.5) 0%,
rgba(59,130,246,0) 50%,
rgba(59,130,246,0.3) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.gradient-border:hover::before {
opacity: 1;
}
Customize gradient color by replacing 59,130,246 (blue-500) with any RGB.
Desktop vignette (radial, subtle darkening at edges):