Effects Library
607 copy-paste effects for modern web projects. Browse, preview, and grab the code.
Text (123)
Typewriter Effect
A classic typewriter animation that reveals text character by character with a blinking cursor.
Gradient Text
Apply a multi-color gradient to text using CSS background-clip.
Text Reveal Slide Up
Text slides up from below its container for an elegant reveal effect.
Neon Glow Text
A glowing neon text effect using layered text-shadows.
Text Outline / Stroke
Hollow text with a colored stroke outline.
Text Scramble / Decode
Text decodes from random characters into the target string.
Animated Underline
An underline that draws from left to right on hover.
Number Counter Roll
A number that counts up from 0 to a target value with easing.
Fade In Word by Word
Text appears one word at a time with staggered fade-in animations.
Highlight Sweep
A color highlight sweeps across text on hover like a marker pen.
Letter Spacing Expand
Letters spread apart on hover then snap back, creating a breathing effect.
Split Color Text
Text split into two colors along a horizontal or diagonal line.
Blur to Sharp Reveal
Text starts blurry and sharpens into focus on load or scroll.
Animated Drop Cap
First letter of a paragraph scales up with a decorative animation.
Infinite Marquee
Text scrolls horizontally in a continuous loop like a news ticker.
Rainbow Text Cycle
Text color cycles through rainbow hues continuously.
Rotating Words
A word in a sentence rotates through multiple options.
Wave Bounce Letters
Each letter bounces in a wave pattern sequentially.
Cursor Text Trail
Text characters follow the cursor in a trailing animation.
Character-by-Character Reveal
Each character fades in individually from invisible.
3D Text Shadow
Stacked shadows create a 3D extruded text effect.
Glitch Text Effect
Digital glitch effect with color channel splitting.
Type & Delete Loop
Types text then deletes it in a continuous loop.
Perspective Tilt Text
Text tilts in 3D perspective on hover.
Animated Gradient Text
Text gradient that shifts colors continuously.
Mirror / Reflection Text
Text with a fading reflection below it.
Vertical Text Ticker
Words rotate vertically through a fixed-height container.
Redacted / Censored Text
Text with black bars that reveal on hover.
Wavy Underline
A wavy animated underline decoration for text.
Blinking Cursor
A simple blinking text cursor animation.
Text on SVG Path
Text that follows a curved SVG path.
Scramble on Hover
Text scrambles to random chars then resolves on hover.
Long Shadow Text
Flat design long shadow extending diagonally.
Video Clip Text
Text filled with a video or animated background.
Word Count Animation
Counts through words until landing on the final one.
Outline to Fill Text
Text transitions from outlined to filled.
Elastic Text Bounce
Text bounces in with spring physics.
Staggered Character Entry
Characters enter one at a time with staggered delays.
Blur In/Out Text
Text blurs in on enter, blurs out on exit.
Color Cycling Text
Text color shifts through a palette continuously.
Kerning Animation
Letter spacing animates on page load.
Slide Up with Mask
Text slides up through a clipping mask.
Scale Focus Word
One word in a sentence scales up on hover.
Flip Characters
Characters flip individually like an airport board.
Animated Strikethrough
Strikethrough line draws across text.
Pulsing Text Shadow
Text shadow pulses in and out.
3D Text Rotation
Text rotates in 3D on the Y axis.
Moving Gradient Clip
Gradient clip moves across text continuously.
Random Character Appear
Characters appear in random order.
Monospace Number Ticker
Numbers tick up in monospace font like a meter.
Staggered Fade Up
Lines of text fade up one after another.
Block Cursor Blink
Block-style cursor that blinks like a terminal.
Highlight Single Word
One word in a sentence gets a colored highlight.
Sparkle Text Effect
Tiny sparkle particles around text.
SVG Stroke Text
Text outlines draw with SVG stroke animation.
Rotating Words
Words rotate through in a fixed-height container.
Wave Color Text
Color wave sweeps across text letters.
Glitch Text
Glitchy offset text with color separation.
Decode Scramble
Text decodes from random characters to final message.
Rainbow Wave Text
Rainbow color shifts across text in a wave.
Split Reveal Left-Right
Text splits and reveals from left and right.
Neon Flicker Text
Text with a flickering neon sign effect.
Backlight Glow
Soft glow emanating from behind text.
3D Extruded Text
Text with layered shadow creating a 3D extrusion effect.
Neon Sign Text
Glowing neon sign effect with flicker.
Retro Chrome Text
Metallic chrome text with retro gradient.
Multiline Typewriter
Types multiple lines sequentially.
Word Shuffle
Words shuffle randomly then settle into order.
Pop In Text
Characters pop in with overshoot bounce.
Wave Up-Down
Letters wave up and down in sequence.
Mask Reveal Text
Text reveals through a moving mask shape.
Type Then Erase
Types a word then erases it to type the next.
Slide In Letters
Each letter slides in from a different direction.
Neon Flicker
Neon text that flickers like a real sign.
Inline Code Highlight
Text styled as inline code with syntax colors.
Notification Badge
Number badge with bounce-in animation.
Variable Font Weight
Font weight animates between thin and bold.
Text in Circle
Text arranged in a circular path.
Terminal Prompt
Blinking terminal cursor with command prompt.
Active Line Highlight
Current line/item gets a highlight bar.
Color Shift on Hover
Text color shifts through spectrum on hover.
Blur to Focus
Text starts blurred and sharpens into focus.
Decimal Counter
Number counts up with decimal precision.
ASCII Art Text
Text rendered in ASCII art style.
Gradient Border Text
Text with animated gradient border/outline.
Matrix Decode
Characters cycle through random values then settle.
Bounce Each Letter
Letters bounce individually like a wave.
Split Word on Hover
Word splits apart into individual letters on hover.
Color Wave Gradient
Gradient color wave moves through text.
Rubberband Text
Text stretches like a rubber band on hover.
Shatter Text
Text shatters into pieces on click.
CSS-Only Tooltip
Tooltip that appears on hover using only CSS.
Vertical Text
Text displayed vertically with writing-mode.
Drop Cap
Large decorative first letter like a newspaper.
Colored Cursor Typewriter
Typewriter with colored blinking cursor.
Scramble Reveal Hover
Text scrambles on hover then reveals.
Wavy Animated Underline
Underline with animated wave pattern.
Fast Gradient Text
Rapidly cycling gradient colors across text.
Fire Text
Text with animated fire/flame effect.
Water Reflection
Text with wavy water reflection below.
Newspaper Column
Multi-column text layout like a newspaper.
3D Shadow Layers
Multiple layered text shadows for depth.
Gradient Underline
Text underline with gradient colors.
Rotate Text on Hover
Individual characters rotate on hover.
Emoji Reaction Row
Row of emoji that scale up on hover.
Character Count Display
Live character count below text input.
Stroke Outline Text
Text with outline stroke and transparent fill.
Marker Highlight
Text highlight that looks like a real marker.
Outline to Fill on Hover
Text outline fills with color on hover.
Wavy Text Underline
Squiggly animated underline beneath text.
Bounce In Sequence
Letters bounce in one by one from below.
Outline to Fill
Text outline fills with color on hover.
Shadow Depth Text
Long shadow creating depth illusion.
Animated Marker Highlight
Marker highlight draws across text.
Animated Strikethrough
Line draws through text on hover.
Expand Letter Spacing
Letter spacing increases on hover.
Clip Path Word Reveal
Words reveal through expanding clip path.
Emoji Rain
Emoji characters falling like rain.
Currency Counter
Dollar amount counts up with formatting.
Custom Cursor Blink
Text cursor with custom blink pattern.
Stacked Text Cards
Words on cards that stack and unstack.
Green Matrix Rain
Green characters falling in columns.
Gradient Text Stroke
Text with gradient outline stroke.
Button (89)
Ripple Click Effect
Material Design-inspired ripple effect on click.
Fill on Hover
Button fills with color from left to right on hover.
Border Draw on Hover
A border draws itself around the button on hover.
Shine / Shimmer Effect
A light shimmer sweeps across the button on hover.
Magnetic Button Pull
Button subtly pulls toward the cursor when nearby.
Confetti on Click
Colorful confetti particles burst from the button on click.
Animated Gradient Border
A gradient border that continuously rotates around the button.
Elastic Bounce
Button squishes on press and bounces back with spring physics.
Icon Slide on Hover
An arrow or icon slides in from the left when hovering the button.
Submit to Loading
Button transforms into a loading spinner after clicking submit.
3D Push Button
Button with 3D depth that pushes down on click.
Neon Glow Button
Button with animated neon glow border effect.
Button to Circle
Rectangular button morphs into a circle on hover.
Liquid Fill Button
Button fills with a wave-like liquid animation on hover.
Dot Pattern Button
Animated dot pattern slides across button background.
Outline Expand Button
Button outline expands outward on hover.
Split Reveal Button
Button splits to reveal colored background on hover.
Arrow Slide Button
Text slides left as arrow slides in from right on hover.
Button Text Morph
Button text morphs between two labels on hover.
Full-Width Expand
Button expands to full container width on hover.
Slide Text Replace
Button text slides out and new text slides in on hover.
Double Border Button
Button with animated inner and outer borders.
Glassmorphism Button
Frosted glass button with backdrop blur.
Skew on Hover
Button skews slightly on hover for a dynamic feel.
Depth Shadow Button
Layered shadows create physical depth illusion.
Growing Underline Button
Underline grows from center on hover.
Background Slide Left
Colored background slides in from left.
Text Swap on Click
Button text changes on click with animation.
Pulse Ring Button
Expanding rings pulse outward on hover.
Icon Rotate on Hover
Button icon rotates 360 degrees on hover.
Gradient Shift Button
Background gradient shifts position on hover.
Bottom Border Button
Thick bottom border slides in on hover.
Scale with Shadow
Button scales up and shadow grows on hover.
Shake on Disabled Click
Disabled button shakes when clicked.
Submit to Checkmark
Button morphs to checkmark on success.
Arrow Bounce Button
CTA arrow bounces to draw attention.
Full Shine Sweep
Wide shine sweep across the entire button.
Icon Morph Button
Button icon morphs to a different icon on hover.
Neon Glow Button
Button with animated neon glow border.
Liquid Fill Button
Liquid wave fills the button on hover.
3D Press Button
Button presses down with 3D depth on click.
Particle Burst Button
Particles explode outward on click.
Ripple Wave Button
Wave ripple expands from click point.
Spinning Border
Gradient border that rotates around button.
Neumorphic Button
Soft UI button with inset/outset shadow.
Brutalist Button
Thick border, offset shadow, raw aesthetic.
Pixel Art Button
8-bit pixel art style button with jagged edges.
Bookmark Toggle
Bookmark icon with fill animation on click.
Heart Like Button
Heart fills with burst particles on click.
Copy to Clipboard
Clipboard icon changes to checkmark on copy.
Dropdown Arrow Rotate
Arrow rotates 180 degrees when dropdown opens.
Outline to Filled
Button morphs from outline to filled on hover.
Send Paper Plane
Paper plane icon flies away on send.
Theme Toggle Sun/Moon
Sun morphs to moon for theme switching.
Menu to Close X
Hamburger lines morph to X on open.
Progress Fill Button
Button fills with color showing progress.
Split Color Button
Button splits into two colors on hover.
3D Cube Button
Button rotates to show text on different cube faces.
Animated Underline CTA
Underline draws from left to right on hover.
Icon Swap Button
Icon changes to a different one on hover.
Shape Morph Button
Button morphs between circle and rectangle.
Spinning Border
Border rotates around the button.
Glow Pulse CTA
CTA button with pulsing glow ring.
Spinning Gradient Border
Gradient border rotates around button.
Animated Close X
X button with rotation animation.
Pill Segment Toggle
Segmented pill control with sliding indicator.
3D Flip Button
Button flips in 3D to show different text.
Slide BG Color
Background color slides in from side on hover.
Icon Slide In
Arrow icon slides in from right on hover.
Add to Cart Button
Button with cart icon animation on click.
Follow/Unfollow Toggle
Social follow button with state toggle.
Download Progress
Button shows download progress bar.
Color Ripple Button
Ripple effect with custom color on click.
Gradient Text Button
Button with gradient text and border.
Social Share Buttons
Share buttons with platform-colored hover.
Arrow Slide CTA
Arrow slides right on hover to indicate action.
Shine Sweep CTA
Light shine sweeps across button on hover.
Animated Gradient Border
Gradient border that rotates around button.
Confetti on Click
Confetti bursts from button on click.
Confetti Click
Confetti burst on button click.
Shake on Error
Button shakes left-right on error.
Expand to Show Text
Icon button expands to reveal text.
Slide to Confirm
Slider button for dangerous actions.
Click Counter Badge
Badge shows click count on button.
Button Loading State
Button shows spinner during loading.
Gradient Shift Button
Gradient position shifts on hover.
Glass Effect Button
Frosted glass button with blur.
Magnetic Hover Button
Button follows cursor slightly.
Text Scramble Button
Button text scrambles on hover.
Hover (90)
3D Card Tilt
Card rotates in 3D following the cursor position.
Card Lift & Shadow
Card lifts up and gains a deeper shadow on hover.
Image Zoom with Overlay
Image zooms in with a dark overlay on hover.
Blur Siblings on Hover
All items blur except the one being hovered.
Color Shift on Hover
Card background smoothly transitions to a new color on hover.
3D Card Flip
Card flips to reveal content on its back side on hover.
Slide-Up Content Overlay
Content panel slides up over an image on hover.
Glowing Border on Hover
Card border glows with color on hover using box-shadow.
Grayscale to Color
Image starts grayscale and transitions to full color on hover.
Parallax Card Layers
Card elements move at different speeds on hover creating depth.
Multi-Line Underline
Underline slides between nav items following the hovered link.
Hover Reveal Text
Hidden text reveals on card hover with slide animation.
Border Chase
A moving border chases around the card perimeter.
Spotlight Cursor
A radial light follows the cursor over a dark card.
Tilt Text on Hover
Text tilts and shifts perspective on hover.
Outline to Fill
Element transitions from outlined to filled on hover.
Gradient Border Card
Card border becomes a gradient on hover.
Scale & Rotate
Element scales up and rotates slightly on hover.
Clip Path Reveal
Content reveals through an expanding clip-path on hover.
Stacked Cards Fan
Stacked cards fan out on container hover.
Before/After Slider
Draggable slider comparing two overlapping images.
Magnetic Grid Items
Grid items subtly shift toward the cursor.
Image Tilt on Hover
Image tilts slightly in 3D on hover.
Animated Card Border
Card border animates with a traveling highlight.
Zoom with Blurred BG
Card zooms while background blurs.
Horizontal Flip Card
Card flips horizontally instead of vertically.
Shake Card on Hover
Card shakes playfully on hover.
Background Color Wipe
Background color wipes diagonally on hover.
Text Slides Up on Hover
Card text shifts up to reveal more on hover.
Icon Bounce on Hover
Card icon bounces playfully on hover.
Gradient Overlay
Gradient overlay fades in on image hover.
Slight Card Rotation
Card rotates 2-3 degrees on hover.
Darken Siblings
Non-hovered items darken while hovered brightens.
Expand Card on Hover
Card expands slightly to reveal more content.
SVG Border Draw
SVG path draws the card border on hover.
Caption Reveal
Image caption slides in from bottom on hover.
Zoom Text on Hover
Text zooms slightly larger on hover.
RGB Glow Card
Card border cycles through RGB colors on hover.
Image Pan on Hover
Zoomed image pans following cursor position.
Underline Fill Text
Text underline fills background on hover.
Skeleton to Content
Card shows skeleton then reveals content on hover.
Neon Border Card
Card with animated neon border glow.
3D Card Rotation
Card rotates in 3D following cursor position.
Spotlight Hover
Radial spotlight follows cursor on card.
Card Shape Morph
Card border-radius morphs between shapes on hover.
Glassmorphism Card
Frosted glass card with backdrop blur.
Spring Physics Card
Card bounces with spring physics on hover.
Mouse Parallax Card
Card layers shift based on mouse position.
Cursor Spotlight Card
Radial light follows cursor across card surface.
Tilt Parallax Card
Card tilts with inner layers moving at different speeds.
Ken Burns Image
Slow zoom and pan on image hover.
Card Fold Corner
Corner of card folds down on hover.
Reveal Hidden Content
Card reveals additional content on hover.
Image Filter Toggle
Grayscale to color transition on hover.
Fancy Text Decoration
Custom underline animation on text hover.
Image Swap on Hover
Front image swaps to back image on hover.
Vertical Flip Card
Card flips vertically to reveal backside.
Cursor Trail Effect
Particles trail behind the cursor.
Glass Tilt Card
Glassmorphism card with tilt on hover.
Zoom & Crop on Hover
Image zooms and recrops on hover.
Tag Expand on Hover
Tag/badge expands to show full text on hover.
Image Expand on Hover
Thumbnail expands to larger preview on hover.
Magnetic Card
Card shifts toward cursor like a magnet.
Blur Non-Hovered
Neighboring cards blur when one is hovered.
Grow with Shadow
Element grows and shadow deepens on hover.
Focus Card Blur Others
Hovered card stays sharp, others blur.
Shine Sweep Card
Light shine sweeps across card on hover.
Rotate Y Card
Card rotates on Y axis on hover.
Circle Crop on Hover
Image clips to circle on hover.
Perspective Tilt
Element tilts with CSS perspective on hover.
Traveling Border
Border highlight travels around the element.
Ambient Glow Card
Soft ambient glow around card on hover.
Stack Peek Card
Cards peek out from behind the top card.
Shape Morph Hover
Element morphs between shapes on hover.
Parallax Layer Image
Image layers shift at different speeds on hover.
Lift and Rotate Card
Card lifts and rotates slightly on hover.
Pattern Change on Hover
Background pattern changes on card hover.
Text Overlay on Image
Text appears over image on hover.
Push Down Card
Card pushes down slightly on hover like a real button.
Draw Border on Hover
Border draws itself around element on hover.
Neon Border Card
Card gets neon-colored border glow on hover.
Blur Zoom on Hover
Image background blurs while subject zooms.
Diagonal Wipe Card
Color wipes diagonally across card.
Spinning Gradient Border Card
Card border with spinning gradient.
Caption Slide Up
Image caption slides up from bottom.
Noise Reveal Card
Noise texture reveals on hover.
Nav Underline Slide
Navigation underline slides between items.
Stagger Children
Card children animate in sequence on hover.
Before/After Image
Slide to compare two images.
Animated Tooltip
Tooltip with spring-in animation.
Loading (64)
CSS Spinner
Classic circular loading spinner.
Pulsing Dots
Three dots that pulse in sequence.
Skeleton Loading Shimmer
Skeleton placeholder with a shimmer animation.
Animated Progress Bar
A progress bar that fills to a target percentage.
Wave Bar Loader
Five bars animate in a wave pattern like an audio equalizer.
Circular Progress Ring
SVG circle that fills as a ring showing percentage progress.
3D Rotating Cube
A wireframe cube that rotates in 3D space as a loading indicator.
Chat Typing Indicator
Three bouncing dots indicating someone is typing a message.
Orbiting Dots
Two dots orbit around a center point.
Flipping Square
A square flips between faces while rotating.
Heartbeat Pulse
A pulsing animation mimicking a heartbeat rhythm.
Infinity Loop
A figure-eight infinity symbol that traces continuously.
Chasing Dots
Dots chase each other in a circular path.
Loading Text Dots
Loading... text with animated ellipsis dots.
Gradient Spinner Ring
Spinner with a gradient stroke that fades to transparent.
Morphing Shape
Shape morphs between circle, square, and triangle.
Bouncing Ball
A ball that bounces with realistic gravity.
Wave Text Loading
The word "Loading" with letters bouncing in a wave.
Clock Spinner
Clock hands that spin as a loading indicator.
Pendulum Swing
A dot swings like a pendulum.
DNA Helix Spinner
Two intertwined strands rotate like DNA.
Pac-Man Loader
Pac-Man eating dots animation.
Hourglass Flip
Hourglass icon that flips periodically.
Signal Strength Bars
Bars fill like a WiFi/signal strength indicator.
Rotating Squares
Two squares rotate around each other.
Line Scale Pulse
Horizontal lines pulse in width.
Fading Dots
Dots that fade in and out sequentially.
Infinity Loop
Figure-eight infinity symbol animation.
Pulse Circle
Concentric circles that pulse outward.
Orbiting Dots
Multiple dots orbiting a central point.
Bouncing Three Dots
Three dots bouncing in sequence.
Sand Timer
Sand falling through an hourglass shape.
Heartbeat Pulse
Heart shape with ECG-style pulse animation.
Determinate Progress Bar
Progress bar that fills to a specific percentage.
Skeleton Card
Full card skeleton with shimmer effect.
Chat Typing Indicator
Three dots bouncing like iMessage typing.
Gradient Progress Bar
Progress bar with animated gradient fill.
Spinning Square
Square rotates and changes size.
Color Cycling Spinner
Spinner that cycles through colors.
Ripple Circles
Expanding ripple circles from center.
Flip Card Loader
Card flips repeatedly as loading indicator.
Skeleton Text Lines
Multiple text line skeletons with shimmer.
Dashed Circle Spin
Dashed circle border that spins.
Gradient Pulse
Pulsing gradient blob.
Dot Grid Loader
Grid of dots that animate sequentially.
Three Bouncing Dots
Three dots bouncing in sequence.
Striped Progress Bar
Progress bar with animated diagonal stripes.
Circle Fill Loader
Circle fills like a liquid level.
Bouncing Bar
Horizontal bar bounces left to right.
Equalizer Bars
Audio equalizer-style bouncing bars.
Atom Spinner
Electrons orbiting a nucleus.
Windows Dots
Four dots rotating like Windows loading.
Circle of Dots
Dots arranged in circle, fading sequentially.
Gradient Arc Spinner
Spinning arc with gradient stroke.
Clock Tick Loader
Clock hand ticking around a circle.
Folding Cube
Cube that folds and unfolds.
Pendulum Swing
Ball swinging back and forth like a pendulum.
Wave Line Loader
Sine wave line that animates.
Morphing Shapes
Shape morphs between circle, square, triangle.
Wave Bars
Vertical bars animating in a wave pattern.
3D Rotating Cube
Wireframe cube rotating in 3D.
Text Loading Dots
Loading... with animated dots.
Clock Tick Spinner
Clock hand ticking around a circle.
DNA Helix
Double helix animation.
Background (69)
Animated Gradient Background
A background gradient that smoothly shifts between colors.
Dot Grid Pattern
A subtle dot grid background pattern using CSS gradients.
Noise / Grain Texture
Adds a subtle film grain texture overlay.
Floating Particles
Subtle floating particles that drift slowly across the background.
Mesh Gradient
Multi-point gradient that creates a smooth organic mesh background.
Aurora / Northern Lights
Undulating color bands that mimic the aurora borealis.
Starfield / Space
Twinkling stars on a dark background for a space effect.
Animated SVG Waves
Smooth wave shapes that undulate using SVG path animation.
Gradient + Noise
Gradient with a subtle noise texture overlay.
Morphing Blobs
Organic blob shapes that morph and move.
Grid Lines Pattern
Subtle grid lines like graph paper.
Diagonal Stripes
Repeating diagonal stripe pattern using CSS gradients.
Topography Lines
Contour-line pattern resembling a topographic map.
Checkerboard Pattern
CSS-only checkerboard background pattern.
Zigzag Pattern
Repeating zigzag border or background pattern.
Radial Pulse
Expanding radial rings that pulse outward.
Pixel Rain / Matrix
Falling characters creating a matrix-style rain effect.
Moving Gradient
Background gradient that shifts position continuously.
Cross-Hatch Pattern
Diagonal cross-hatch lines background.
Circuit Board Pattern
Circuit board trace pattern for tech aesthetics.
Hexagon Grid
Honeycomb hexagonal grid pattern.
Gradient Wave
Undulating gradient waves in the background.
Bokeh Circles
Soft blurred circles like camera bokeh.
Isometric Grid
Isometric/diamond grid pattern.
Water Ripple
Concentric circle ripple effect like water.
Falling Confetti
Colorful confetti pieces falling continuously.
Animated Dot Grid
Dots in a grid that pulse or shift.
Cursor Spotlight BG
Radial gradient follows cursor on background.
Animated Mesh Gradient
Multi-point gradient that animates positions.
Topography Lines
Topographic contour line pattern.
Diagonal Lines
Repeating diagonal stripe pattern.
Northern Lights
Aurora borealis gradient animation.
Blueprint Grid
Engineering blueprint grid pattern.
Animated Mesh BG
Soft mesh gradient that shifts slowly.
Matrix Code Rain
Falling green characters like The Matrix.
Liquid Blob
Animated blob shape that morphs continuously.
Floating Geometric Shapes
Triangles, circles, squares floating in background.
Wavy Horizontal Lines
Horizontal lines with wave animation.
Blurred Gradient Orbs
Multiple blurred gradient circles as background.
Dot Matrix Pattern
Uniform dot grid pattern for subtle texture.
Diagonal Stripes
Repeating diagonal stripe pattern.
Star Warp Speed
Stars streaming past like hyperspace.
Smoke/Fog Effect
Wisps of smoke or fog drifting.
Holographic Shimmer
Rainbow holographic shimmer effect.
Film Grain Noise
Subtle film grain overlay for texture.
Animated Topography
Topographic lines that shift slowly.
Slow Mesh Gradient
Very slow-moving mesh gradient for ambient feel.
Line Drawing Pattern
Lines draw themselves to form a pattern.
Conic Gradient BG
Rotating conic gradient background.
Animated Background Squares
Squares fade in and out randomly.
Rotating Gradient BG
Background gradient that slowly rotates.
Dotted Line Grid
Grid made of dotted lines.
Polka Dot Pattern
Classic polka dot background pattern.
Glowing Grid
Grid with glowing intersection points.
Subtle Noise Texture
Very light noise overlay for depth.
Four Corner Gradient
Different color in each corner blending.
CRT Scanlines
Retro CRT monitor scanline effect.
Moving Circles BG
Semi-transparent circles moving slowly.
Triangle Pattern
Repeating triangle tessellation pattern.
Circuit Board Pattern
Circuit board trace pattern background.
Isometric Grid
Isometric diamond grid pattern.
Honeycomb Pattern
Hexagonal honeycomb grid pattern.
Cross Hatch Pattern
Diagonal cross-hatch pencil texture.
Connected Particles
Particles with connecting lines between nearby dots.
Rain Drops
Raindrops falling down the screen.
Hexagon Grid
Honeycomb hexagonal grid pattern.
Ocean Waves
Layered SVG ocean waves animating.
Circuit Board
PCB trace pattern background.
Snowfall
Snowflakes drifting down gently.
Form (60)
Floating Label Input
Input label floats above the field when focused.
iOS-Style Toggle Switch
A pure CSS toggle switch styled like iOS.
Shake on Error
Horizontal shake animation for form validation errors.
Password Strength Meter
Color-coded strength bar that updates as the user types a password.
Success Checkmark
Animated SVG checkmark that draws itself for form submission success.
Auto-Growing Textarea
Textarea that automatically expands as the user types more lines.
Tag Input with Animation
Input that converts typed text into animated tag pills on Enter.
Custom Radio Buttons
Styled radios with smooth check animation.
Custom Checkboxes
Styled checkboxes with animated check mark.
Custom Select
Styled select replacing the native browser control.
Custom Range Slider
Styled range input with custom track and thumb.
Chip / Pill Select
Multi-select using clickable chip/pill toggles.
OTP Code Input
Multi-digit code input with auto-focus between fields.
Star Rating
Interactive star rating with hover preview.
Expanding Search Bar
Search icon expands into a full input field on click.
Mini Calendar Picker
Compact date picker with month navigation.
Inline Validation Icons
Check/X icons appear inline as user fills form fields.
Animated Form Labels
Labels animate to different positions based on input state.
Mini Color Picker
Compact color picker with hex input.
Multi-Step Form Wizard
Form broken into numbered steps with progress.
PIN Code Input
Separate boxes for each digit of a PIN.
Credit Card Form
Formatted credit card input with card type detection.
Quantity Stepper
Plus/minus buttons with smooth number animation.
File Drop Zone
Animated file upload drop zone with progress.
Emoji Reaction Picker
Row of emoji reactions with scale animation.
Combobox / Autocomplete
Input with dropdown suggestions that filter as you type.
Toggle Switch Group
Group of labeled toggles for settings panels.
Dark Mode Toggle
Sun/moon toggle switch for theme switching.
Progress Bar Steps
Multi-step progress bar with labels.
Dual Range Slider
Range slider with two handles for min/max.
Chip Select
Multi-select with animated chip pills.
Theme Toggle Switch
Light/dark mode toggle with icons.
Show/Hide Password
Eye icon toggle for password visibility.
Animated Number Input
Number input with rolling digit animation.
Floating Action Input
Input that expands from a floating action button.
Animated Checkboxes
Checkboxes with draw-in checkmark animation.
Custom Select Dropdown
Styled select with animated option list.
Textarea with Counter
Character counter that changes color near limit.
Custom Range Slider
Styled range input with value tooltip.
Radio Card Selection
Radio buttons as selectable cards.
OTP Auto-Advance
Input auto-advances to next field on digit entry.
Drag to Reorder List
Drag items to reorder with smooth animation.
Stepper Input
Plus/minus buttons for numeric input.
Pill Toggle Switch
iOS-style pill toggle switch.
Underline Input Focus
Input underline expands from center on focus.
Animated Placeholder
Placeholder text types itself out.
Segmented Control
iOS-style segmented control component.
Code Verification Input
Spaced character input for verification codes.
iOS Toggle Switch
Pixel-perfect iOS-style toggle switch.
Color Swatch Selector
Grid of color swatches to pick from.
Avatar Upload Circle
Circular upload area with preview.
Search with Kbd Shortcut
Search input showing keyboard shortcut hint.
Time Picker Input
Custom time picker with hour/minute.
Simple Date Picker
Minimal date picker with calendar dropdown.
Star Rating Input
Interactive star rating with half-star support.
Tag Input with Chips
Input where entries become removable chips.
Credit Card Input
Formatted card input with auto-spacing.
Calendar Date Picker
Mini calendar for date selection.
Star Rating Input
Interactive star rating selector.
Emoji Reaction Picker
Emoji selector with category tabs.
Layout (56)
Hamburger to X Morph
Hamburger menu icon morphs into an X when toggled.
Scroll Progress Bar
A progress bar that fills as the user scrolls down.
Smooth Accordion
Collapsible sections with smooth height animation using grid trick.
Modal with Backdrop Blur
Modal scales in with a frosted blur backdrop overlay.
Animated Tooltip
Tooltip fades in above element on hover with arrow pointer.
Sliding Tab Indicator
Tab underline slides smoothly between tabs on click.
Masonry Grid Stagger
Grid items fade in with staggered delays creating a cascade effect.
Slide-Out Drawer
Side panel that slides out from the edge with backdrop overlay.
Animated Breadcrumbs
Breadcrumb nav with separator animation.
Toast Notification
Toast that slides in and auto-dismisses.
Full Page Skeleton
Complete page skeleton with header, sidebar, and content areas.
Collapsible Sidebar
Sidebar that collapses to icons on toggle.
Scroll to Top Button
Fixed button that appears on scroll and scrolls to top.
Sticky Footer
Footer sticks to bottom even with short content.
Command Palette (⌘K)
Keyboard-triggered command palette overlay.
Bottom Sheet
Mobile-style bottom sheet that slides up with drag.
Animated Pagination
Page number indicators with transition animations.
Split Screen Layout
Two halves that resize on hover.
Vertical Timeline
Vertical timeline with alternating left/right entries.
Kanban Board Layout
Draggable kanban columns with card styling.
Swipeable Card Stack
Tinder-style swipeable card stack.
Mega Menu Dropdown
Full-width dropdown navigation with columns.
Floating Action Button
FAB with expanding action menu.
Lightbox Image Gallery
Grid gallery with lightbox zoom overlay.
Monthly/Annual Toggle
Pricing table with smooth plan switching.
Card Carousel
Horizontal scrolling card carousel with peek.
Cookie Consent Banner
Animated cookie consent banner at page bottom.
Breadcrumb with Animation
Breadcrumb items slide in on page load.
Stacked Notifications
Toast notifications that stack with animation.
Off-Canvas Menu
Full-height side menu that slides in.
CSS Masonry Grid
Pinterest-style masonry layout with pure CSS.
Responsive Navigation
Navbar that collapses to hamburger on mobile.
Stacked Toast System
Multiple toasts stack and auto-dismiss.
Toast Notification Stack
Stacking toast notifications with auto-dismiss.
Animated Dropdown
Dropdown menu with spring animation.
Page Scroll Indicator
Thin progress bar at top showing scroll position.
Expandable Detail Card
Card expands to show full details on click.
Chevron Breadcrumbs
Breadcrumb with chevron separators and hover.
Sidebar Push Content
Sidebar pushes main content instead of overlaying.
Lightbox Photo Gallery
Grid gallery with lightbox overlay and navigation.
Collapsible Panel
Accordion-style collapsible content panel.
Fixed Announcement Bar
Fixed top banner with dismiss button.
Animated Tab Bar
Tab indicator slides to active tab.
Notification Bell Shake
Bell icon shakes when notification arrives.
Avatar Stack
Overlapping circular avatars with count badge.
Stat Card with Trend
KPI card with number and trend indicator.
Step Progress Indicator
Numbered step indicator with completion state.
Filterable Card Grid
Card grid with animated category filtering.
Mini Sidebar Icons
Icon-only sidebar that expands on hover.
3-Column Masonry
Three-column masonry layout with CSS.
Pricing Card
Pricing card with feature list and CTA.
Empty State Illustration
Friendly empty state with illustration and CTA.
Command Palette (⌘K)
Spotlight-style command palette overlay.
Vertical Timeline
Vertical timeline with alternating entries.
Command Palette
Cmd+K searchable command menu.
Cookie Consent Banner
GDPR cookie consent with animation.
Scroll (56)
Fade In on Scroll
Elements fade in and slide up as they enter the viewport.
Parallax Background
Background image scrolls at a different speed than foreground content.
Counter on Scroll
Numbers count up from zero when the element scrolls into view.
Sticky Shrinking Header
Navigation bar shrinks and adds shadow as user scrolls down.
Staggered Scroll Reveal
Multiple elements reveal with staggered timing on scroll.
Scroll Snap Sections
Full-page sections that snap into place on scroll.
Horizontal Scroll Section
A section that scrolls horizontally while page scrolls vertically.
Text Parallax Layers
Text layers move at different speeds on scroll.
Scroll-Triggered Zoom
Image zooms in as the user scrolls past it.
Background Color on Scroll
Page background color transitions as sections scroll by.
Number Scrub on Scroll
Numbers change as user scrolls through a range.
Section Progress Dots
Vertical dots indicating current scroll section.
Pinned Scroll Section
Section pins in place while content scrolls within it.
Highlight Text on Scroll
Text highlights word-by-word as user scrolls past.
Horizontal Card Scroll
Cards scroll horizontally with snap points.
Shrink to Mini Header
Full header shrinks to a compact bar.
Rotate on Scroll
Element rotates based on scroll position.
Opacity Fade Section
Section fades based on scroll position.
Hero Scale on Scroll
Hero section scales down as user scrolls.
Circular Scroll Progress
Circular progress indicator for scroll position.
Text Grows on Scroll
Text size increases as user scrolls into section.
Image Sequence on Scroll
Multiple images swap creating animation on scroll.
Mask Reveal on Scroll
Content reveals through an expanding mask shape.
Staggered Scroll Reveal
Elements reveal in sequence as section scrolls in.
Skew on Scroll
Elements skew based on scroll velocity.
Section Text Fade
Each section text fades as user scrolls to next.
Text Shadow Depth
Text shadow grows deeper on scroll.
Sliding Sections
Sections slide over each other on scroll.
Video Progress on Scroll
Video scrubs forward as user scrolls.
Stats Counter on Scroll
Numbers count up when stats section enters view.
Stacking Images on Scroll
Images stack on top of each other as user scrolls.
Typewriter on Scroll
Text types out as user scrolls past.
Cards Flip on Scroll
Cards flip to reveal back side as scrolled into view.
Count Up on View
Numbers count from 0 to target when visible.
Text & Image Parallax
Text and image move at different scroll speeds.
Snap Scroll Carousel
Horizontal carousel with CSS scroll snap.
Hero Zoom & Fade
Hero zooms in and fades as user scrolls down.
Line Draws on Scroll
SVG line draws as user scrolls.
3D Card Stack
Cards stack in 3D as scrolled into view.
Text Opacity on Scroll
Text becomes more opaque as it scrolls to center.
Blur BG on Scroll
Background image blurs as user scrolls down.
Word-by-Word Reveal
Words appear one by one as user scrolls.
Grow Element on Scroll
Element scales from 0 to full size on scroll.
Fade In Up on Scroll
Elements fade in and slide up when scrolled into view.
Rotate on Scroll
Element rotates based on scroll position.
Slide In From Left
Element slides in from left on scroll.
Shrink Sticky Header
Header shrinks and changes style on scroll.
Vertical Section Snap
Full-height sections with scroll snap.
Section Dot Indicators
Dots on side indicating current section.
Parallax Hero Section
Hero with parallax background on scroll.
Pin Element on Scroll
Element pins in place while section scrolls.
Horizontal Scroll Section
Section scrolls horizontally within vertical page.
Number Count Up
Large numbers count up when scrolled into view.
Scroll Progress Ring
Circular progress ring showing scroll position.
Horizontal Timeline
Timeline that scrolls horizontally.
Odometer Numbers
Numbers roll like an odometer on scroll.