Zero JavaScript
Pure CSS
Every effect on this page runs without a single line of JavaScript. Animations, transforms, transitions — CSS only.
Glassmorphism
Frosted Glass Cards
Hover to see the lift and glow effect.
backdrop-blur
The frosted glass effect uses backdrop-blur-xl with a semi-transparent background. The blurred blobs behind the card show through.
Hover Lift
A -translate-y-2 on hover with a teal shadow creates the illusion of the card lifting toward you. Pure CSS transition.
Border Glow
The border transitions from white/10 to teal-400/30 on hover — a subtle glow that frames the content.
Perspective
3D Card Flip
Hover each card to flip it over.
Borders
Animated Gradient Borders
Conic Gradient
A conic-gradient with an animated from angle — a single light sweeps around the border edge via @property.
Pulse Border
A simple border-color animation pulses between visible and invisible, drawing attention without motion sickness.
Marching Dashes
Animated background-position on four gradient strips marches dashes around the perimeter like a selection marquee.
Gradient Fade
A linear-gradient from teal to transparent as the border background. Visible at top, invisible at bottom.
Spectrum Sweep
A full spectrum conic-gradient with animated angle — rainbow light continuously circling the card.
Double Border
Two concentric borders with a gap. The outer ring pulses independently, creating a breathing depth effect.
Draw on Hover
An SVG rect with stroke-dashoffset transitioned to 0 on hover — the border draws itself around the card.
Corner Accents
Four corner border elements that grow on hover — a minimal, technical aesthetic that frames content without enclosing it.
Typography
Text Effects
Three stacked layers with clip-path slicing and offset keyframes.
steps() timing + overflow: hidden + animated width with a blinking cursor border.
-webkit-text-stroke for the outline, background-clip: text with a sliding gradient fill.
Each letter gets a staggered translateY animation with increasing delay — a sine wave effect.
filter: blur() animated from 10px to 0 — text sharpens into view like a camera focusing.
Pulsing text-shadow with multiple layered glows at different radii — a classic neon sign.
A 300%-wide gradient with background-clip: text and animated background-position.
Animated letter-spacing expanding and contracting — the text inhales and exhales.
Backgrounds
Living Gradients
A four-stop gradient at 400% size animated with background-position keyframes. The colors shift continuously without ever repeating exactly.
In the Wild
Who Uses This
Every Website
CSS animations are the foundation of modern web interaction. Hover states, loading spinners, page transitions, and micro-interactions all start here. No library download, no JS bundle cost.
Performance-Critical Sites
Sites with strict performance budgets (e-commerce, news, SaaS) use CSS-only effects because they run on the compositor thread with zero main-thread cost. No JS parse, no GC pauses.
Email & Restricted Environments
HTML emails, AMP pages, and security-restricted environments block JavaScript entirely. CSS animations are the only option for visual dynamism in these contexts.
Design Systems & Components
Component libraries encode interaction patterns (hover, focus, active, disabled) as CSS. Designers prototype in CSS before any JavaScript is written — it's the universal language of the web.
No JS. No problem.
CSS is the most underestimated animation tool on the web. These effects load instantly, run at 60fps, and work everywhere — no bundle, no runtime, no dependencies.