move.gl
Version:
Motion and Animation Library for Stylescape.
1,257 lines (1,162 loc) • 53.1 kB
HTML
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description"
content="Motion and Animation Library — CSS animations, transitions, keyframes, and interactive motion effects." />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
<title>move.gl</title>
<!-- Library CSS -->
<link rel="stylesheet" href="/css/move.gl.css" />
<!-- Documentation CSS -->
<link rel="stylesheet" href="/css/move.gl.docs.css" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet">
<style>
.effect-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.effect-card {
background: var(--color-surface, #fff);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.effect-card__preview {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.effect-card__preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.effect-card__info {
padding: 0.75rem 1rem;
text-align: center;
}
.effect-card__title {
font-size: 0.85rem;
font-weight: 600;
margin: 0 0 0.25rem;
color: var(--color-text, #333);
}
.effect-card__code {
padding: 0.5rem 0.75rem;
background: var(--color-code-bg, #f5f5f5);
border-top: 1px solid var(--color-border, #e0e0e0);
}
.effect-card__code code {
font-size: 0.7rem;
word-break: break-all;
color: var(--color-code, #e91e63);
}
.demo-box-effect {
width: 80px;
height: 80px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
color: #333;
}
.demo-box-shadow {
width: 80px;
height: 80px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 500;
color: #666;
}
.section-divider {
margin: 3rem 0 2rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border, #e0e0e0);
}
h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
h2+p {
color: var(--color-text-muted, #666);
margin-bottom: 1.5rem;
}
</style></head>
<body class="">
<div class="nav-wrapper">
<nav class="nav">
<div class="nav__inner">
<a href="index.html" class="nav__logo">
<span class="nav__logo-text">move.gl</span>
<span class="nav__version">v0.0.1</span>
</a>
<div class="nav__right">
<button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
<svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path
d="M8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zm7-5a.75.75 0 00-.75-.75h-1.5a.75.75 0 000 1.5h1.5A.75.75 0 0015 8zM3 8a.75.75 0 00-.75-.75H.75a.75.75 0 000 1.5h1.5A.75.75 0 003 8zm9.536-4.536a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 001.06 1.061l1.061-1.06a.75.75 0 000-1.061zm-9.072 9.072a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 101.06 1.061l1.061-1.06a.75.75 0 000-1.061zm9.072 0a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 101.061-1.06l-1.06-1.061zm-9.072-9.072a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 001.061-1.06l-1.06-1.061z" />
</svg>
<svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
</svg>
</button>
<div class="nav__dropdown" id="nav-dropdown">
<button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
<span>Docs</span>
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
stroke-width="1.5">
<path d="M1 1l4 4 4-4" />
</svg>
</button>
<div class="nav__dropdown-menu" role="menu">
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Learn</span>
<a href="getting-started.html" role="menuitem">Getting Started</a>
<a href="core-concepts.html" role="menuitem">Core Concepts</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Overview</span>
<a href="test_overview.html" role="menuitem">All Animations</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Animations</span>
<a href="test_fade.html" role="menuitem">Fade</a>
<a href="test_slide.html" role="menuitem">Slide</a>
<a href="test_bounce.html" role="menuitem">Bounce</a>
<a href="test_zoom.html" role="menuitem">Zoom</a>
<a href="test_flip.html" role="menuitem">Flip</a>
<a href="test_scale.html" role="menuitem">Scale</a>
<a href="test_spin.html" role="menuitem">Spin & Rotate</a>
<a href="test_pulse.html" role="menuitem">Pulse</a>
<a href="test_shake.html" role="menuitem">Shake & Wobble</a>
<a href="test_attention.html" role="menuitem">Attention</a>
<a href="test_special.html" role="menuitem">Special Effects</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Effects</span>
<a href="test_loaders.html" role="menuitem">Loaders</a>
<a href="test_transitions.html" role="menuitem">Transitions</a>
<a href="test_transforms.html" role="menuitem">Transforms</a>
<a href="test_effects.html" role="menuitem">Filter Effects</a>
<a href="test_keyframes.html" role="menuitem">Keyframes</a>
<a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">TypeScript Demos</span>
<a href="demo_draggable.html" role="menuitem">Draggable</a>
<a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
<a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
<a href="demo_screensaver.html" role="menuitem">Screensaver</a>
<a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
</div>
</div>
</div>
<a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
title="View on GitHub">
<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</nav>
</div>
<div class="container">
<header class="header"><p class="eyebrow">Classes</p>
<h1>CSS Effects & Filters</h1> </header>
<main>
<section>
<h2>🌫️ Blur Filters</h2>
<p>CSS blur filter effects at various intensities</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=1" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--blur-sm">
<img src="https://picsum.photos/200/150?random=1" alt="blur-sm">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blur-sm (2px)</h4>
</div>
<div class="effect-card__code">
<code>.filter--blur-sm</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--blur">
<img src="https://picsum.photos/200/150?random=1" alt="blur">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blur (4px)</h4>
</div>
<div class="effect-card__code">
<code>.filter--blur</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--blur-md">
<img src="https://picsum.photos/200/150?random=1" alt="blur-md">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blur-md (8px)</h4>
</div>
<div class="effect-card__code">
<code>.filter--blur-md</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--blur-lg">
<img src="https://picsum.photos/200/150?random=1" alt="blur-lg">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blur-lg (16px)</h4>
</div>
<div class="effect-card__code">
<code>.filter--blur-lg</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--blur-xl">
<img src="https://picsum.photos/200/150?random=1" alt="blur-xl">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blur-xl (24px)</h4>
</div>
<div class="effect-card__code">
<code>.filter--blur-xl</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>⬛ Grayscale Filters</h2>
<p>Convert images to grayscale at different intensities</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=2" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--grayscale-0">
<img src="https://picsum.photos/200/150?random=2" alt="grayscale-0">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">grayscale-0</h4>
</div>
<div class="effect-card__code">
<code>.filter--grayscale-0</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--grayscale-50">
<img src="https://picsum.photos/200/150?random=2" alt="grayscale-50">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">grayscale-50</h4>
</div>
<div class="effect-card__code">
<code>.filter--grayscale-50</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--grayscale">
<img src="https://picsum.photos/200/150?random=2" alt="grayscale">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">grayscale (100%)</h4>
</div>
<div class="effect-card__code">
<code>.filter--grayscale</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🟫 Sepia Filters</h2>
<p>Vintage sepia tone effects</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=3" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--sepia-50">
<img src="https://picsum.photos/200/150?random=3" alt="sepia-50">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">sepia-50</h4>
</div>
<div class="effect-card__code">
<code>.filter--sepia-50</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--sepia">
<img src="https://picsum.photos/200/150?random=3" alt="sepia">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">sepia (100%)</h4>
</div>
<div class="effect-card__code">
<code>.filter--sepia</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>☀️ Brightness Filters</h2>
<p>Adjust image brightness levels</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=4" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--brightness-50">
<img src="https://picsum.photos/200/150?random=4" alt="brightness-50">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">brightness-50</h4>
</div>
<div class="effect-card__code">
<code>.filter--brightness-50</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--brightness-75">
<img src="https://picsum.photos/200/150?random=4" alt="brightness-75">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">brightness-75</h4>
</div>
<div class="effect-card__code">
<code>.filter--brightness-75</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--brightness-100">
<img src="https://picsum.photos/200/150?random=4" alt="brightness-100">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">brightness-100</h4>
</div>
<div class="effect-card__code">
<code>.filter--brightness-100</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--brightness-125">
<img src="https://picsum.photos/200/150?random=4" alt="brightness-125">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">brightness-125</h4>
</div>
<div class="effect-card__code">
<code>.filter--brightness-125</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--brightness-150">
<img src="https://picsum.photos/200/150?random=4" alt="brightness-150">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">brightness-150</h4>
</div>
<div class="effect-card__code">
<code>.filter--brightness-150</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🔲 Contrast Filters</h2>
<p>Adjust image contrast levels</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=5" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--contrast-50">
<img src="https://picsum.photos/200/150?random=5" alt="contrast-50">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">contrast-50</h4>
</div>
<div class="effect-card__code">
<code>.filter--contrast-50</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--contrast-100">
<img src="https://picsum.photos/200/150?random=5" alt="contrast-100">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">contrast-100</h4>
</div>
<div class="effect-card__code">
<code>.filter--contrast-100</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--contrast-150">
<img src="https://picsum.photos/200/150?random=5" alt="contrast-150">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">contrast-150</h4>
</div>
<div class="effect-card__code">
<code>.filter--contrast-150</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--contrast-200">
<img src="https://picsum.photos/200/150?random=5" alt="contrast-200">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">contrast-200</h4>
</div>
<div class="effect-card__code">
<code>.filter--contrast-200</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🎨 Saturate Filters</h2>
<p>Adjust color saturation levels</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=6" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--saturate-0">
<img src="https://picsum.photos/200/150?random=6" alt="saturate-0">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">saturate-0</h4>
</div>
<div class="effect-card__code">
<code>.filter--saturate-0</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--saturate-50">
<img src="https://picsum.photos/200/150?random=6" alt="saturate-50">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">saturate-50</h4>
</div>
<div class="effect-card__code">
<code>.filter--saturate-50</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--saturate-150">
<img src="https://picsum.photos/200/150?random=6" alt="saturate-150">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">saturate-150</h4>
</div>
<div class="effect-card__code">
<code>.filter--saturate-150</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--saturate-200">
<img src="https://picsum.photos/200/150?random=6" alt="saturate-200">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">saturate-200</h4>
</div>
<div class="effect-card__code">
<code>.filter--saturate-200</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🌈 Hue Rotate Filters</h2>
<p>Rotate the hue of colors</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=7" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--hue-rotate-30">
<img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-30">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">hue-rotate-30°</h4>
</div>
<div class="effect-card__code">
<code>.filter--hue-rotate-30</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--hue-rotate-60">
<img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-60">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">hue-rotate-60°</h4>
</div>
<div class="effect-card__code">
<code>.filter--hue-rotate-60</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--hue-rotate-90">
<img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-90">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">hue-rotate-90°</h4>
</div>
<div class="effect-card__code">
<code>.filter--hue-rotate-90</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--hue-rotate-180">
<img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-180">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">hue-rotate-180°</h4>
</div>
<div class="effect-card__code">
<code>.filter--hue-rotate-180</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--hue-rotate-270">
<img src="https://picsum.photos/200/150?random=7" alt="hue-rotate-270">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">hue-rotate-270°</h4>
</div>
<div class="effect-card__code">
<code>.filter--hue-rotate-270</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🔄 Invert Filters</h2>
<p>Invert image colors</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=8" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--invert-0">
<img src="https://picsum.photos/200/150?random=8" alt="invert-0">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">invert-0</h4>
</div>
<div class="effect-card__code">
<code>.filter--invert-0</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--invert-50">
<img src="https://picsum.photos/200/150?random=8" alt="invert-50">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">invert-50</h4>
</div>
<div class="effect-card__code">
<code>.filter--invert-50</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--invert">
<img src="https://picsum.photos/200/150?random=8" alt="invert">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">invert (100%)</h4>
</div>
<div class="effect-card__code">
<code>.filter--invert</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🌑 Drop Shadow Filters</h2>
<p>CSS filter drop-shadow effects</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview" style="background: #f0f0f0;">
<img src="https://picsum.photos/100/100?random=9" alt="Original"
style="width: 80px; height: 80px; border-radius: 8px;">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--drop-shadow-sm" style="background: #f0f0f0;">
<img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-sm"
style="width: 80px; height: 80px; border-radius: 8px;">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">drop-shadow-sm</h4>
</div>
<div class="effect-card__code">
<code>.filter--drop-shadow-sm</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--drop-shadow" style="background: #f0f0f0;">
<img src="https://picsum.photos/100/100?random=9" alt="drop-shadow"
style="width: 80px; height: 80px; border-radius: 8px;">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">drop-shadow</h4>
</div>
<div class="effect-card__code">
<code>.filter--drop-shadow</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--drop-shadow-md" style="background: #f0f0f0;">
<img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-md"
style="width: 80px; height: 80px; border-radius: 8px;">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">drop-shadow-md</h4>
</div>
<div class="effect-card__code">
<code>.filter--drop-shadow-md</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--drop-shadow-lg" style="background: #f0f0f0;">
<img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-lg"
style="width: 80px; height: 80px; border-radius: 8px;">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">drop-shadow-lg</h4>
</div>
<div class="effect-card__code">
<code>.filter--drop-shadow-lg</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--drop-shadow-xl" style="background: #f0f0f0;">
<img src="https://picsum.photos/100/100?random=9" alt="drop-shadow-xl"
style="width: 80px; height: 80px; border-radius: 8px;">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">drop-shadow-xl</h4>
</div>
<div class="effect-card__code">
<code>.filter--drop-shadow-xl</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🎭 Filter Presets</h2>
<p>Pre-configured filter combinations for creative effects</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview">
<img src="https://picsum.photos/200/150?random=10" alt="Original">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Original</h4>
</div>
<div class="effect-card__code">
<code>No filter applied</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--noir">
<img src="https://picsum.photos/200/150?random=10" alt="noir">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Noir</h4>
</div>
<div class="effect-card__code">
<code>.filter--noir</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--vintage">
<img src="https://picsum.photos/200/150?random=10" alt="vintage">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Vintage</h4>
</div>
<div class="effect-card__code">
<code>.filter--vintage</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--cold">
<img src="https://picsum.photos/200/150?random=10" alt="cold">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Cold</h4>
</div>
<div class="effect-card__code">
<code>.filter--cold</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview filter--warm">
<img src="https://picsum.photos/200/150?random=10" alt="warm">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">Warm</h4>
</div>
<div class="effect-card__code">
<code>.filter--warm</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🌫️ Backdrop Filters</h2>
<p>CSS backdrop-filter effects for glass morphism</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--blur" style="background: rgba(255,255,255,0.2);">Blur</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--blur</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--blur</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--blur-sm" style="background: rgba(255,255,255,0.2);">Blur SM</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--blur-sm</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--blur-sm</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--blur-lg" style="background: rgba(255,255,255,0.2);">Blur LG</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--blur-lg</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--blur-lg</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--glass" style="background: rgba(255,255,255,0.2);">Glass</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--glass</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--glass</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--glass-dark" style="background: rgba(0,0,0,0.2); color: #fff;">
Glass Dark</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--glass-dark</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--glass-dark</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--grayscale" style="background: rgba(255,255,255,0.2);">Grayscale
</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--grayscale</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--grayscale</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--sepia" style="background: rgba(255,255,255,0.2);">Sepia</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--sepia</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--sepia</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<div class="demo-box-effect backdrop--invert" style="background: rgba(255,255,255,0.2);">Invert</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">backdrop--invert</h4>
</div>
<div class="effect-card__code">
<code>.backdrop--invert</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🌑 Box Shadows</h2>
<p>Box shadow utilities for depth and elevation</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow">Default</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow</h4>
</div>
<div class="effect-card__code">
<code>.shadow</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--sm">Small</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--sm</h4>
</div>
<div class="effect-card__code">
<code>.shadow--sm</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--md">Medium</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--md</h4>
</div>
<div class="effect-card__code">
<code>.shadow--md</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--lg">Large</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--lg</h4>
</div>
<div class="effect-card__code">
<code>.shadow--lg</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--xl">X-Large</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--xl</h4>
</div>
<div class="effect-card__code">
<code>.shadow--xl</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--inner">Inner</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--inner</h4>
</div>
<div class="effect-card__code">
<code>.shadow--inner</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--glow">Glow</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--glow</h4>
</div>
<div class="effect-card__code">
<code>.shadow--glow</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--glow-lg">Glow LG</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--glow-lg</h4>
</div>
<div class="effect-card__code">
<code>.shadow--glow-lg</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--primary">Primary</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--primary</h4>
</div>
<div class="effect-card__code">
<code>.shadow--primary</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--success">Success</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--success</h4>
</div>
<div class="effect-card__code">
<code>.shadow--success</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--warning">Warning</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--warning</h4>
</div>
<div class="effect-card__code">
<code>.shadow--warning</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: #f5f5f5;">
<div class="demo-box-shadow shadow--danger">Danger</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">shadow--danger</h4>
</div>
<div class="effect-card__code">
<code>.shadow--danger</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🎭 Blend Modes</h2>
<p>CSS mix-blend-mode effects for creative layering</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--multiply" style="background: #fff;">Multiply</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--multiply</h4>
</div>
<div class="effect-card__code">
<code>.blend--multiply</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--screen" style="background: #333;">Screen</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--screen</h4>
</div>
<div class="effect-card__code">
<code>.blend--screen</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--overlay" style="background: #888;">Overlay</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--overlay</h4>
</div>
<div class="effect-card__code">
<code>.blend--overlay</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--darken" style="background: #aaa;">Darken</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--darken</h4>
</div>
<div class="effect-card__code">
<code>.blend--darken</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--lighten" style="background: #555;">Lighten</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--lighten</h4>
</div>
<div class="effect-card__code">
<code>.blend--lighten</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--difference" style="background: #fff;">Difference</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--difference</h4>
</div>
<div class="effect-card__code">
<code>.blend--difference</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--exclusion" style="background: #888;">Exclusion</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--exclusion</h4>
</div>
<div class="effect-card__code">
<code>.blend--exclusion</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4);">
<div class="demo-box-effect blend--hue" style="background: #667eea;">Hue</div>
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">blend--hue</h4>
</div>
<div class="effect-card__code">
<code>.blend--hue</code>
</div>
</div>
</div>
</section>
<section class="section-divider">
<h2>🎭 Masks</h2>
<p>CSS mask effects for fade gradients</p>
<div class="effect-grid">
<div class="effect-card">
<div class="effect-card__preview mask--fade-t">
<img src="https://picsum.photos/200/150?random=20" alt="fade-t">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">mask--fade-t</h4>
</div>
<div class="effect-card__code">
<code>.mask--fade-t</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview mask--fade-b">
<img src="https://picsum.photos/200/150?random=20" alt="fade-b">
</div>
<div class="effect-card__info">
<h4 class="effect-card__title">mask--fade-b</h4>
</div>
<div class="effect-card__code">
<code>.mask--fade-b</code>
</div>
</div>
<div class="effect-card">
<div class="effect-card__preview mask--fade-l">
<img src="https://picsum.photos/200/150?r