Blur
Defines Gaussian blur radii to create depth, glass effects, and layered visual emphasis across the interface.
Blur
Blur tokens enable designers to create depth, focus, and frosted-glass effects with consistent values. By using a predefined scale, the system promotes clarity, cohesion, and maintainability across all UI surfaces.
Core Principles
- Depth & Focus — Use blur to draw attention and separate interface layers.
- Consistency — Apply predefined tokens instead of hardcoded pixel values.
- Performance — Use blur mindfully; excessive values can impact rendering.
- Accessibility — Never apply blur to essential text or interactive elements.
Blur Tokens
| Token Name | CSS Value | Description |
|---|---|---|
blur.none | blur(0px) | No blur — used for crisp, unfiltered UI elements. |
blur.xs | blur(2px) | Subtle blur for fine borders, dividers, or soft accents. |
blur.sm | blur(4px) | Light blur for small cards or delicate glassmorphism effects. |
blur.md | blur(8px) | Medium blur for popovers, tooltips, or general soft UI backgrounds. |
blur.lg | blur(12px) | Large blur for modals, panels, and deeper layering. |
blur.xl | blur(16px) | Strong blur for hero sections or immersive overlays. |
blur.xxl | blur(24px) | Maximum blur for full-screen backdrops or high-impact frosted effects. |
Why these values? Each level approximately doubles the blur area, balancing design utility with rendering performance.
Usage Example
:root {
--blur-none: blur(0px);
--blur-xs: blur(2px);
--blur-sm: blur(4px);
--blur-md: blur(8px);
--blur-lg: blur(12px);
--blur-xl: blur(16px);
--blur-xxl: blur(24px);
}
.card-glass {
backdrop-filter: var(--blur-md); /* Frosted-glass effect */
background-color: rgba(255, 255, 255, 0.6); /* Pair with opacity */
border-radius: 1rem;
padding: 1.5rem;
}<div class="card-glass">
<h3>Frosted Card</h3>
<p>This component uses a medium blur with semi-transparent background.</p>
</div>TypeScript Token Object
export const blur = {
none: 'blur(0px)',
xs: 'blur(2px)',
sm: 'blur(4px)',
md: 'blur(8px)',
lg: 'blur(12px)',
xl: 'blur(16px)',
xxl: 'blur(24px)',
} as const;Key Blur Practices
| Scenario | Recommendation |
|---|---|
| Glass Cards | Use --blur-md with 40–60% opacity for soft, elevated card layers. |
| Modals | Apply --blur-lg or higher to enhance focus on dialog content. |
| Performance | Use blur selectively; avoid layering multiple heavy filters. |
| Dark Mode | Slightly increase background opacity to offset blur brightness spread. |
React Example: Frosted Card
<div
className="bg-white/60 rounded-xl p-6"
style={{ backdropFilter: 'var(--blur-md)' }}
>
{/* content here */}
</div>Blur, when used thoughtfully, adds depth and elegance without compromising clarity. Tendoo’s blur tokens ensure consistent, high-performance visuals that scale across themes and components.