Effect Registry
Snippets
Browse all 189 CSS snippets. Each one is standalone, under 50 lines, Tailwind v4 compatible, and meant to be understandable as a reusable effect pattern, not just copied blindly.
lighting
Cursor- and sweep-driven light accents for premium surfaces.
Light Sweep Border
Animated perimeter highlight that sweeps across the border of a premium card or CTA.
Specular Button
Glossy specular highlight sweep for premium buttons and compact CTAs.
Spotlight Card
Interactive spotlight lighting that tracks pointer position across a dark card surface and adds premium specular highlights.
depth
Layering, perspective, and stacking for spatial depth.
Context Sheet
Translucent bottom sheet that slides up while preserving page context behind it. The frosted background keeps the user oriented — they see where they came from.
Depth Blur
CSS depth-of-field: background elements are blurred and dimmed, foreground stays sharp. Simulates optical focus. Sharpens slightly on hover.
Floating Stack
Hover-reactive 3D stack that makes layered mockups and cards feel suspended in space.
Isometric Tile
Faux-isometric surface for dashboard tiles, gallery previews, and feature boards.
Layered Panels
Faux-3D panel stack using perspective and translateZ to create depth without JavaScript.
Parallax Layers
CSS-native scroll parallax using perspective and translateZ. Background layers scroll slower than foreground — no JavaScript, no scroll listeners.
masks
Reveal and cutout effects where shape and transition matter more than motion.
Box Unreveal
Full overlay panel that slides away on hover, revealing the base card beneath it.
Clip Slice Reveal
Hover reveal that opens a clipped overlay across a card, useful for promo surfaces, category cards, and highlighted links.
Diagonal Reveal
Diagonal mask transition that wipes across content for hero cards, media blocks, and image overlays.
Marquee Oval
Infinite horizontal image scroll with elliptical edge masking. Creates a pill-shaped viewing window for auto-scrolling content.
Radial Unveil
Radial mask opening that reveals content from the center outward for cinematic previews.
Spotlight Reveal
Masked spotlight that reveals one focused zone while the surrounding surface stays softened.
Text Cutout
Masked text cutout treatment that reveals a gradient or image through oversized display type.
atmosphere
Lightweight background systems for mood, depth, and focus without hard UI.
Grain Overlay
Animated film-grain texture using an SVG noise filter on a pseudo-element. Shifts position in steps for a flickering retro effect.
Halo Grid
Halo-lit tech grid backdrop for dashboards, hero headers, and AI-style landing pages.
Light Rays
Volumetric light-ray background for hero sections and editorial headers using blurred gradient beams.
Ocean Depth
Multi-layer ocean gradient with surface light and deep-water transition — static and animated variant.
Particle Field
Ambient floating particle background for hero sections, logins, and product launches.
Ripple Ring
Concentric expanding ring animation — water droplet effect for CTAs, avatars, and focus points.
Static Grain
A fine film-grain overlay using a static SVG noise filter and mix-blend-mode. Adds tactile texture to backgrounds without animation.
Wave Border
Animated wave edge at the bottom of a section — maritime, organic section divider.
surfaces
Material and finish effects for cards, panels, and premium components.
Brushed Metal
Brushed metal surface for hardware-flavored cards, toggles, and premium control panels.
Holographic Foil
Iridescent foil surface with rotating conic highlights for premium badges, cards, and feature callouts.
Presentation Glass
Sharper, more restrained glass surface for presentation frames and stage cards.
Rim Highlight Panel
Card or panel surface with a subtle perimeter highlight and low ambient glow, suited for premium settings panels and featured surfaces.
Soft Emboss
Soft embossed surface for tactile panels, segmented controls, and calm utility UIs.
Top Light Panel
Surface accent with a soft top-light gradient that makes cards and panels feel more dimensional without a full glow treatment.
glass
Translucency, see-through, and glass-like overlays for modern surfaces.
Adaptive Glass
Liquid-glass surface that adjusts tint, brightness, and saturation to the luminance of the content behind it. Lighter in light mode, more saturated in dark mode — picks up ambient color.
Bold Glass
High-impact glassmorphism with strong blur, saturated backdrop, and inset highlight. Hero cards, modals, and featured content that demands attention.
Colored Glass
Tinted glassmorphism with configurable hue via OKLCH. Change the color by adjusting a single custom property. Great for brand-themed glass effects.
Dark Glass
Smoky dark glass with reduced brightness backdrop. Ideal for overlays, dark-themed modals, and cinematic UI elements over light backgrounds.
Frosted Glass
Classic frosted glass effect with backdrop-filter blur. Configurable blur strength, opacity, and border. Includes dark mode and fallback.
Subtle Glass
A barely-there glass effect for understated UI surfaces. Light blur with minimal opacity — perfect for nav bars, toolbars, and overlays that shouldn't compete with content.
animations
Entry and motion patterns for components, headlines, and groups.
Bar Grow
Horizontal progress bar fill animation via scaleX transform. Configurable target width, duration and color.
Blur In
Elements materialize from a blurred state into sharp focus. A cinematic reveal effect with optional upward motion.
Clip Reveal
Four directional clip-path reveal animations (left, right, top, bottom) using inset() keyframes for entrance effects.
Count Up
Pure CSS counter animation using @property to register --count-n as an integer type, enabling smooth interpolation in counter-reset. No JavaScript needed.
Crossfade Pulse
Two elements that pulse in opposite phase — when one brightens, the other dims. Creates a breathing alternation effect without JavaScript.
Fade In
Smooth fade-in animations with optional direction (up, down). Uses professional spring-like easing. Respects prefers-reduced-motion.
Flip 3D
3D card flip on hover revealing a back face. Uses perspective and backface-visibility for a true coin-flip effect with front and back content.
Flip Word
Vertical word rotation — a CSS slot-machine effect that cycles through words in a list with a hold pause between each. No JavaScript needed.
Float Suspend
Schwebende Float-Animation mit konfigurierbarem Versatz und Dauer via CSS Custom Properties.
Gradient Background Scroll
Animated gradient background via background-size 400% + background-position loop. Weicher Farbwechsel durch vertikales Scrolling durch Gradient-Stops — kein Canvas, rein CSS.
Infinite Scroll
Seamless horizontal auto-scroll animation for logo clouds, tickers, and marquee effects. Pauses on hover. Respects reduced motion.
Marquee Scroll
Endlos-Horizontal-Scroll via GPU-beschleunigtem translate3d. Pausiert beim Hover. Konfigurierbare Geschwindigkeit.
Pulse Gradient
Breathing background-size animation on a dark-to-accent gradient — creates a subtle depth pulse for enterprise hero sections and full-bleed backgrounds.
Scale In
Scale-based entrance animations — subtle grow, grow-up, and pop-from-center variants. Professional easing with reduced-motion support.
Skeleton Shimmer Soft
Lower-contrast shimmer treatment for loading placeholders that feels calmer than aggressive skeleton sweeps.
Slide In
Directional slide-in animations from left, right, or bottom. Smooth deceleration curve with reduced-motion support.
Stagger
Automatically stagger child element animations with configurable delay. Add the class to a parent and children animate in sequence — pure CSS, no JS.
Stagger Reveal
CSS-only stagger system: set --stagger-index on each element to delay its fade-up by index × step.
Subtle Pulse
Gentle opacity pulse animation for notification badges, status indicators, and "new" markers. Respects prefers-reduced-motion.
SVG Draw
SVG path drawing animation via stroke-dasharray/dashoffset. Works on any SVG shape — path, circle, rect, polygon. Auto-play and hover variants.
SVG Path Draw
SVG paths animate as if being drawn, using stroke-dashoffset with configurable duration and delay.
Text Line Rise
Text rises into view from below, clipped by an overflow-hidden parent. A fundamental reveal animation for headlines and text blocks.
Tile Pop-In
Scale + fade entrance animation for cards and tiles, with configurable delay for stagger sequences.
easing
Curves for motion when timing itself makes the difference.
Easing Tokens
Curated set of professional easing functions as CSS custom properties. Spring, bounce, elastic, and more — beyond the standard ease-in-out.
Industrial
A distinctive easing curve with fast start, early peak, and long gentle deceleration with subtle snap at the end. Feels mechanical and precise.
scroll
View- and scroll-driven mechanics for storytelling, progress, and structure.
Chapter Snap
Soft section snapping for long-form pages that should feel chaptered like a presentation.
Clip Reveal Scroll
Scroll-progress-driven clip-path reveal. An element is gradually unmasked as the user scrolls, using IntersectionObserver thresholds mapped to a CSS custom property.
Parallax
Pure CSS parallax scrolling with configurable speed. Three presets (slow, default, fast) powered by scroll-driven animations.
Pill Nav Morph
Scroll-timeline-driven navbar that morphs from full-width and transparent into a centered glass pill as the user scrolls past 120 px.
Progress Bar
A fixed scroll progress indicator at the top of the page. Grows from left to right as the user scrolls. Pure CSS, no JS.
Scroll Counter
Numbers count up from zero to a target value as the element scrolls into view, using @property and CSS counters.
Scroll Highlight
Elements become prominent when active in viewport — scales up, removes blur, increases opacity. Ideal for scroll-driven showcases.
Scroll Reveal
Elements fade in and slide up as they enter the viewport using scroll-driven animations. Falls back to a one-shot animation for older browsers.
Scroll Unmask
Progressive clip-path reveal driven by scroll position, unmasking elements as they enter the viewport.
Sequential Steps
Steps enter one after another with a configurable pause once the group becomes visible. Useful for horizontal process rows where regular viewport triggers fire all items at once.
Snap Sections
Full-viewport scroll snapping for section-based layouts. Mandatory snapping with start or center alignment. Uses dvh for mobile safety.
Sticky Header
A sticky header that shrinks and adds a shadow as the user scrolls. Uses scroll-driven animation for buttery smooth transitions.
Sticky Stack
Cards that stack on top of each other while scrolling. Each card has a decreasing z-index and increasing inset, creating a cascading deck effect with pure CSS sticky positioning.
decorative
Ambient and ornamental backgrounds, textures, and visual accents.
Aurora
Animated aurora borealis gradient background that slowly shifts colors. Uses OKLCH and oversized background-size for smooth looping.
Border Radius Smooth
Anti-aliased border radius using mask-image radial-gradient trick. Prevents jagged edges in Safari and GPU-composited overflow hidden scenarios.
Color Breathe
Smooth OKLCH hue shift animation using @property to create a color-breathing background effect.
Dashed Line
Pixel-perfect dashed lines using repeating-linear-gradient instead of border-dashed. Customizable dash length, gap, and color. Includes fade-out variants with mask-image.
Depth Lines
Stacked vertical lines with decreasing opacity that create visual depth and structure. Uses box-shadow on a zero-width pseudo-element — no extra HTML needed.
Device Frame
CSS-only device mockup with gradient shell, inset shadows, and blurred drop shadow. Wrap any screenshot or video in a realistic tablet/laptop frame without images.
Dot Matrix
Decoratives Dot-Grid via radial-gradient background-image. Drei Varianten: standard, large und fade (mit mask-image Ausblendung zur Mitte).
Double Border
Offset outer border via pseudo-element with negative margin. Creates a layered double-frame effect. Includes a hover variant that scales in on mouse enter.
Edge Fade
Gradient overlay that fades content to a solid color at section edges. Bottom, top, or both directions. No mask-image — works with any background color.
Frame Corners
All four corner brackets on a single element via background-image gradients. Fully configurable size, thickness, color, and offset — no pseudo-elements needed.
Gradient Badge
Status badge with off-center radial gradient for a 3D-like depth effect. Semantic presets for success, danger, warning, and info.
Gradient Border
Animated rotating rainbow border using @property and conic-gradient. The gradient spins continuously around the element.
Gradient Border Glow
Animated gradient glow border that rotates around an element. Two pseudo-element layers — a blurred outer glow and a sharp inner border.
Gradient Mesh
A soft, blurred multi-color gradient mesh background using layered conic gradients and blend modes. Fully configurable via OKLCH custom properties.
Gradient Progress Line
A left-to-right progress line with configurable gradient stops. Use it for process progress, status semantics, or to sync a visual line with active steps.
Grid Pattern
CSS-only grid and dot patterns for backgrounds. Configurable size, color, and thickness. No images or SVGs needed.
Label Rail
Vertical rail accent for small label groups, metadata blocks, and editorial side notes.
Lava Blobs
Three independent animated blobs with heavy blur that drift across a container, creating a fluid lava-lamp background effect.
Mask Blob Layered
Two-layer organic blob mask — a colored accent blob behind an image with a different organic shape, creating a layered depth effect.
Morph Blob
Organic morphing blob shape that continuously animates its border-radius through asymmetric values.
Neon Glow
Pulsing neon glow effect for text and boxes using layered shadows that breathe between dim and bright.
Noise Texture
Adds a subtle film grain / noise texture overlay to any element via a pseudo-element and inline SVG filter. No external images needed.
Orb
Soft, glowing decorative orbs using radial gradients and blur. Static or pulsing variant. Perfect as ambient background decoration.
Pulse Glow
Pulsing box-shadow glow effect for buttons, status indicators, and call-to-action elements. Configurable color and size via OKLCH.
Radial Beam
A rotating conic-gradient spotlight beam sweeping from below the element. Uses @property to animate the beam angle smoothly. Works as a dark-section background accent.
Ripple Rings
Three concentric expanding rings radiating outward — a pure-CSS sonar or live-status pulse for circular indicators.
Shadow Depth
Four semantic shadow utility classes — natural, floating, strong, and crisp — covering directional, diffuse, elevated, and hard-offset shadow styles Tailwind's generic scale doesn't address.
Shimmer
Loading skeleton placeholder with a diagonal light sweep animation for content loading states.
Story Progress Line
Thin chapter-progress rail for narrative pages, deck sections, and long-form storytelling flows.
Stripe Reveal
Hover overlay with animated repeating stripes for buttons, cards, and highlighted surfaces.
Topographic Lines
Soft contour-line background accent for editorial cards, hero panels, and diagram-like surfaces.
interactions
Hover, pointer, and click reactions for more tactile components.
Accessible Focus Ring
WCAG 2.2 compliant double focus ring with outline and contrasting shadow. Dark mode aware with :focus-visible fallback.
Billing Toggle
A styled checkbox that toggles between monthly and annual billing plans. Pure CSS, no JavaScript, keyboard and screen-reader accessible.
Border Draw
Border draws itself around an element on hover using clip-path transitions on pseudo-elements.
Button 3D
Physical 3D button with inset highlight/lowlight edges. Light strip on top, shadow on bottom via pseudo-element — inverts on press for a tactile click feel.
Button Background Slide
Button hover effect where a contrasting background slides in from the left using a 200% gradient and background-position transition with elastic easing.
Button Glow
Button with a colored box-shadow that matches the background, creating a neon-like glow beneath. Shadow intensifies on hover, softens on press.
Button Text Slide
Button label slides up and out on hover while duplicate text slides in from below. Slot-machine style text replacement with overflow hidden.
Caption Slide Card
Media card overlay where the caption block lifts into place on hover, useful for galleries, featured posts, and promo tiles.
Card Fan Stack
Cards spread into a shallow fan on hover for preview stacks, deck thumbnails, and grouped evidence blocks.
Carousel Snap
CSS-only horizontal carousel with scroll-snap. Responsive — full-width on mobile, 2-up on tablet, 3-up on desktop. No JavaScript required.
Clip Path Toggle
Bidirectional clip-path text swap on hover. Default text wipes out to the left while alternate text wipes in from the right — a directional "rewind" transition.
Clip Wipe Hover
Directional clip-path wipe on hover that reveals a back layer from any direction. A modern alternative to 3D flip-box effects.
Cursor Spotlight
Radial-Gradient folgt dem Cursor innerhalb einer Card via CSS Custom Properties --cx/--cy, gesetzt durch ein Mini-JS.
Custom Scrollbar
Styled scrollbar with configurable width, track and thumb colors. Uses CSS standard scrollbar-color with -webkit fallback. Dark mode aware.
Dropdown Origin Shift
Direction-aware dropdown motion that appears anchored to its trigger instead of just fading in.
Expand Cards
Flex-based accordion cards with vertical tab labels that expand on hover. Collapsed cards show rotated text, active card reveals full content. Mobile-responsive with stagger entrance.
Flip Card
3D card flip effect revealing back content on hover using CSS perspective and backface-visibility.
Focus Within Panel
Panel-level focus treatment that highlights a whole grouped UI block whenever one of its inner controls receives keyboard focus.
Glow
Cursor-following glow effect on hover using a pseudo-element and radial gradient. Configurable color, size, and intensity.
Hamburger Stagger
Asymmetric burger icon with half-width top/bottom lines that rotate into an X with a springy cubic-bezier easing.
Haptic Press
3D press effect that sinks the element downward on click — a bottom shadow collapses as if the button is physically pressed into the surface.
Hover Lift
Elements lift up and gain a shadow on hover. Simple, elegant depth feedback with configurable distance and shadow.
Icon Shift Link
Inline link treatment where the trailing icon glides forward on hover, ideal for text actions, cards, and section CTAs.
Icon Swap
CSS-only icon crossfade on hover. Default icon slides up and fades out while hover icon slides in from below — smooth swap without JavaScript.
Image Accordion
CSS-only image accordion where hovered items expand while siblings collapse with blur overlay. Uses flex-grow transitions — no JavaScript.
Input Spotlight
Rotating conic-gradient spotlight border on focus. A light beam sweeps around the input field when active — no JavaScript required.
Jelly
Elastic squash-and-stretch animation on click. The element compresses then bounces back with dampening — like pressing a rubber button.
Magnetic
Elements subtly follow the cursor on hover, creating a magnetic pull effect. Requires a small JS snippet to set mouse position variables.
Modal Scale Fade
Overlay entry treatment that scales and fades a panel into place without feeling abrupt. Works for modals, dialogs, and drawers.
Nav Anchor Slider
A sliding background that follows nav links on hover — zero JavaScript, powered entirely by CSS Anchor Positioning.
Nav Fill Expand
Background color block that fills upward from bottom on hover, inverting text color. Great for nav items, buttons, and CTAs.
Nav Underline Expand
Underline that expands outward from center on hover. Works on navigation links, text links, and tab items.
Nav Underline Slide
Directional underline that slides in from right on hover and out to left on unhover, using scaleX with swapped transform-origin.
Orbit Ring
CSS-only rotating orbit ring with up to four counter-rotating items that stay upright as the ring spins. Uses animation-delay offsets to space items evenly.
Pulse Border
Expanding border ring that fades outward in a loop. Draws attention to an element without being intrusive — like a sonar ping.
Ripple
Material Design-style ripple effect on click using a pseudo-element and radial gradient. Pure CSS with optional JS for click position.
Ripple CSS
CSS-only expanding circle ripple on hover and click. No JavaScript required — uses a pseudo-element that scales from center.
Rolling Text
Text rolls upward on hover, revealing a duplicate from below. A sleek micro-interaction for navigation links and buttons.
Scheme Toggle
Prevents janky transition flashes during dark/light mode switching by temporarily killing all CSS transitions via a body class.
Scroll Hint
Bouncing scroll indicator that nudges users to scroll down. Pure CSS animation, no JavaScript required.
Scroll Progress Ring
Fixed-position scroll-to-top button with an SVG ring that fills as the user scrolls down the page.
Shine Border
Rotating conic-gradient border using @property for smooth angle animation. Activates on hover — no JavaScript needed.
Shine Sweep
Diagonal light streak sweeps across an element on hover, creating a polished glass-like reflection effect.
Sidebar Slide Over
Slide-over behavior for mobile sidebars and off-canvas panels, with reduced-motion fallback.
Spring Bounce
Entrance animation with spring overshoot — cubic-bezier(0.34, 1.56, 0.64, 1) exceeds 1 to produce a physical bounce. Also a stagger variant for lists and grids.
Stack Peek Card
Card hover effect that reveals a two-layer stack behind the surface for a more editorial, dimensional hover state.
Stagger Entrance
Children of a container slide up and fade in sequentially as the container enters the viewport. CSS transitions triggered by IntersectionObserver.
Sticky Reveal
Slide-down entrance animation for sticky headers. The header slides into view from above when the sticky class is applied on scroll.
Swing
Horizontal shake with dampening on hover. Oscillates left-right with decreasing amplitude — grabs attention without being aggressive.
Tab Indicator Slide
Active tab underline treatment that feels more deliberate than a static border-bottom.
Table Row Highlight
Hover, focus, and active-state treatment for dense table rows and list items.
Thumb Reveal Link
Link hover that reveals a small thumbnail beside the label, useful for editorial lists, menus, and featured link groups.
Thumb Stack Link
Link hover that reveals a small stack of thumbnails, useful for menus, portfolios, and featured editorial lists.
Thumbnail Hover Scrim
Image scale with dark overlay scrim on hover. Uses clip-path to honor border-radius during GPU-composited transforms.
Tilt
3D perspective tilt on hover that follows the cursor position. Configurable tilt angle, perspective, and duration.
Underline Draw
Gradient-based underline that draws from left to right on hover. Works on inline wrapping text unlike ::after approaches.
Underline Dual
Two-phase underline animation where ::before draws in from left while ::after fades out to right, creating a choreographed handoff effect.
Underline Shrink
Visible underline that shrinks away on hover. The inverse of underline-draw — starts visible, disappears on interaction.
Widget Expand
Widgets lift and slightly scale to signal active focus without breaking the surrounding grid.
text
Typographic utilities and effects for more readable and punchy copy.
Blockquote Centered
Centered blockquote with thin horizontal line accents above and below instead of quotation marks or left border. Clean editorial aesthetic.
Character Stagger
Staggered character entrance animation using CSS custom property --char-index. Each character slides up and fades in with an offset delay.
Cursor Blink
Blinkender Terminal-Cursor via ::after Pseudo-Element. Harter Schnitt statt Fade für authentisches Aussehen.
Fluid Size
Responsive font sizes that scale smoothly between viewport widths using CSS clamp(). Five presets from sm to 2xl.
Font Weight Morph
Continuously animates font-variation-settings between thin and bold on variable fonts. Creates a pulsing weight effect with no JavaScript.
Gradient Text
Apply a gradient to text using background-clip. Static and animated variants. Configurable colors, angle, and speed via OKLCH custom properties.
Gradient Text
Textfarbe als Gradient via background-clip. Zwei Varianten: bunt (.gradient-text) und subtil-neutral (.gradient-text-subtle).
Letter Pull Up
Characters slide up from behind an overflow:hidden clip mask. Distinct from opacity-fade entrances — letters physically emerge from below the baseline.
Letter Spacing In
Block-level text entrance that animates from compressed letter-spacing to an expanded value while fading in. Creates a cinematic expansion effect.
Link Swap
Typographic link hover that swaps the visible label with a second colored layer using pseudo-elements and data-hover.
Text Balance
Even line breaks for headings with text-wrap balance. Prevents orphans in body text with text-wrap pretty. Native CSS, no JS.
Text Reveal
Words slide up and fade into view as the element enters the viewport. Vanilla JS word-splitter with CSS transitions, no external dependencies.
Text Stroke Reveal
Text starts as an outlined stroke and fills with color using @property to animate opacity.
Truncate Multiline
Truncate text to a configurable number of lines with an ellipsis. Uses -webkit-line-clamp with baseline browser support.
Typewriter Reveal
Text reveal animation using clip-path that mimics typewriter effect. Pure CSS, no JavaScript. Respects reduced motion and includes @supports fallback.
Underline Swipe
Inline link effect where the underline draws in with a directional swipe, suited for navs, article links, and text actions.
Wavy Text
Continuous wave animation on character spans using nth-child staggered animation-delay. Ideal for logos, loading states, and playful headings.
Word Highlight
Translucent pill-shaped underlay behind individual words using a ::after pseudo-element. Emphasizes keywords inline without disrupting text flow.
Word Stagger
Staggered word entrance animation using CSS custom property --word-index. Each word slides up with a subtle skew and fades in with an offset delay.