CSS Effects Encyclopedia — 72 Interactive Pure CSS Effects
Last updated: April 2026. A free, zero-dependency interactive playground featuring 72 CSS effects across 8 categories. Each effect uses pure CSS (with minimal vanilla JS for interactive demos) and can be previewed live and copied for immediate use in your projects.
CSS Animations (12 effects)
Keyframe-based animations that run continuously or on trigger. All use transform and opacity for GPU-accelerated 60fps performance. Includes: bounce (vertical hop), pulse (scale with fade), shake (horizontal tremor), spin (360° rotation), float (gentle vertical drift), swing (pendulum motion), rubber band (elastic squish & stretch), jello (wobbly skew distortion), heartbeat (double-beat pulse), flip (3D Y-axis rotation), tada (attention-grabbing wiggle), and wave bars (staggered equalizer animation).
Text Effects (10 effects)
Typography-focused visual effects for headings and display text. Includes: gradient text (animated background-clip gradient fill), glitch (RGB-split with ::before/::after pseudo-elements and clip-path), typewriter (character-by-character reveal with blinking cursor), neon glow (flickering text-shadow neon sign), blur reveal (filter blur-to-sharp cycle), letter spacing (expanding/contracting tracking animation), text wave (per-letter vertical wave using animation-delay), 3D text (layered text-shadow for depth), stroke fill (-webkit-text-stroke outline that fills with color), and shadow cascade (expanding multi-layer text-shadow).
CSS Transitions (10 effects)
Hover-triggered smooth property transitions demonstrating different easing curves. Includes: scale (enlarge on hover), rotate (180° turn), color (smooth color shift), morph round (square to circle border-radius), slide (translateX displacement), spring (overshoot bounce with cubic-bezier(0.68,-0.55,0.27,1.55)), elastic (elastic overshoot easing), multi morph (simultaneous shape, color, and rotation), shadow lift (elevation with box-shadow deepening), and stagger (sequential transition-delay chain across multiple elements).
Mouse & Hover Effects (8 effects)
Cursor-interactive effects that respond to mouse position and clicks. Includes: parallax tilt (3D perspective rotation tracking cursor via mousemove), ripple click (Material Design expanding circle on click), magnetic (element pulls toward cursor position), glow follow (radial gradient spotlight follows mouse), spotlight (reveal hidden text under cursor), border follow (gradient border angle tracks mouse position), hover reveal (content slide-swap on hover), and cursor trail (fading dot particles following mouse movement).
Background Effects (8 effects)
Full-area background animations created without image files. Includes: animated gradient (4-color linear-gradient with background-position keyframes), aurora (blurred radial gradients simulating northern lights), starfield (multiple radial-gradient dots with twinkle opacity), mesh gradient (5-point overlapping radial-gradients), moving stripes (repeating-linear-gradient with position animation), liquid blobs (blur-filtered animated circles), noise texture (SVG feTurbulence overlay), and particles (Canvas 2D connected particle network with line drawing).
3D CSS Effects (8 effects)
Three-dimensional transforms using CSS perspective and preserve-3d. Includes: card flip (180° Y-axis rotation with backface-visibility hidden, revealing front and back faces), rotating cube (6-face cube with continuous rotateX/rotateY keyframe), perspective tilt (hover-triggered rotateX/rotateY with translateZ), depth layers (3 stacked planes at different translateZ values), paper fold (panels with rotateY folding on hover), depth stack (cards that spread apart on hover), 3D carousel (4-item rotateY carousel with continuous spin), and book open (cover flips open 160° revealing page beneath).
Image & Filter Effects (8 effects)
CSS filter property effects applied on hover transitions. Includes: blur (Gaussian blur via filter: blur(4px)), grayscale (full desaturation), sepia (warm vintage tone), hue-rotate (180° color wheel shift), high contrast (contrast(2) with brightness boost), invert (negative image), saturate (3x color oversaturation), and clip-path reveal (circle clip-path expanding from 20% to 70% on hover).
Micro-interactions (10 effects)
Small, functional UI feedback animations. Includes: toggle switch (click to slide on/off with color change), animated checkbox (border-to-filled with checkmark), spinner (rotating ring border-top loader), bouncing dots (3-dot loading with staggered animation-delay), audio bars (5-bar equalizer with scaleY animation), like/heart button (click to scale and color-change to red), progress bar (gradient fill loop animation), notification badge (pulsing count indicator), hamburger-to-X (3-line menu icon morphing to X via translateY and rotate), and success checkmark (SVG polyline with stroke-dashoffset animation).
How to Use This Playground
- Browse categories — Click any of the 8 categories in the left sidebar.
- Preview effects — Each card shows a live interactive demo. Hover or click to interact.
- Select and copy — Click cards to select, then copy the generated prompt describing your chosen effects.
Frequently Asked Questions
Do these effects require JavaScript?
The majority of 72 effects are pure CSS. Only a few interactive demos (parallax tilt, ripple click, cursor trail, canvas particles) use lightweight vanilla JavaScript — no frameworks or libraries needed.
Are these effects production-ready?
Yes. All animations use transform and opacity properties for optimal performance. The CSS is copy-paste ready and works in all modern browsers (Chrome, Firefox, Safari, Edge).
Can I use these effects in my project for free?
Yes. All effects are free to use in personal and commercial projects with no attribution required.