Shadows & Effects
Create depth and beautiful visual styling using CSS shadows, opacity, blend modes, and glassmorphism (backdrop blurs).
Core Effects
Blending & Glassmorphism
Effects Preview
Target Element
class="shadow-md opacity-100 mix-blend-normal"iEffects & Depth
Effects allow you to create layered, rich interfaces. Shadows provide depth on the Z-axis, while opacity and blurs create texture.
✨ Glassmorphism (Backdrop Blur):To achieve the popular frosted glass effect, you need three things:
1. A semi-transparent background color (like `bg-white/40`)
2. The backdrop blur utility (`backdrop-blur-md`)
3. Something colorful behind the element to actually blur!
1. A semi-transparent background color (like `bg-white/40`)
2. The backdrop blur utility (`backdrop-blur-md`)
3. Something colorful behind the element to actually blur!
⚠️ Mix Blend Modes:These tell the browser how the element's colors should mathematically mix with the background behind it. `multiply` darkens, `screen` lightens. Note that this affects the element's background AND its text!