Skip to content

Animation Tools

CSS Bounce Animation, Animated Gradients, Loading Spinners and Scroll Effects

Tools for animation on the web. Build CSS keyframe animations on a timeline, shape easing curves, make loading spinners, scroll animations and text effects, draw SVG paths and animate a logo reveal. Each one previews live and exports clean code.

78 tools tagged Animation

3D Tilt Card

Build a card that tilts in 3D toward the cursor with a glare.

Add Text To GIF

Put a bold caption on every frame of an animated GIF.

Animated Banner

Design an animated ad banner and export GIF or WebM.

Animated Counter

Make a number count-up animation and copy the code.

Animated Dropdown

Build an accessible dropdown menu with a fade, slide or scale animation.

Animated Gradient

Make a smoothly shifting gradient background in pure CSS.

Animated Gradient Border

Spinning multi-colour gradient border around any card.

Aurora Background

Make a soft northern lights glow that drifts behind a section.

Bokeh Background

Drifting blurred lights behind a heading, in pure CSS.

Bottom Sheet

Build a slide-up bottom sheet with actions and swipe to close.

Bubble Background

Add see-through bubbles that wobble as they rise.

Confetti Generator

Fire a burst of confetti from a button, no library.

Countdown Timer

Build a days, hours, minutes and seconds countdown to any date.

Coverflow Carousel

Build a 3D cover flow slider with tilted side slides.

CSS Bounce Animation

A bouncing ball with optional squash and stretch.

CSS Heartbeat Animation

A pure CSS heart that beats at any rate you choose.

CSS Marquee Generator

Build an infinite scrolling headline marquee in pure CSS.

CSS Pulse Animation

A pulsing ring around a button or a live status dot.

CSS Rain Effect

Falling rain streaks over a section background, no script.

CSS Shake Animation

Shake or wiggle a button on hover or on a loop.

Cubic Bezier

Shape a CSS easing curve and watch it animate.

Cursor Trail

Add a fading dot trail that follows the mouse.

Custom Cursor

Build a dot and ring custom cursor that grows over links.

Dot Background

Faded dot-grid background for hero sections, pure CSS.

Easing Comparison

Run two CSS easings side by side and copy the winner.

Fade-In Generator

Generate a CSS fade-in animation with delay, easing and blur.

Fire Text Effect

Flickering flames rising off your text, using text shadows.

Fireworks Effect

Launch rockets that burst into sparks behind your hero.

Floating Action Button

Build a floating action button with an optional speed dial menu.

Floating Shapes

Add slowly rising, spinning shapes behind a hero section.

GIF Cropper

Crop an animated GIF without losing the animation.

GIF Maker

Combine several images into one animated GIF.

GIF Resizer

Resize, speed up, slow down or reverse an animated GIF.

Glitch Text Effect

Jittery RGB-split text that looks like a broken screen.

Glow Effect

Neon glow for headings and buttons, pure CSS.

Gooey Effect

Liquid metaball blobs that merge and split, with an SVG filter.

Gradient Mask Generator

Fade images to transparent with a linear or radial CSS mask.

Grid Background

Faded grid-line background for hero sections, pure CSS.

Hover Effect Builder

Build animated hover effects for buttons and links.

Image Reveal On Scroll

Wipe or circle an image into view as it scrolls onto the screen.

Image Text Fill

Show a photo through the letters of a heading.

Ken Burns Effect

Slow pan and zoom moves that bring still photos to life.

Keyframe Animator

Build and preview a CSS @keyframes animation from three stops.

Keyframe Timeline

Edit a multi-stop keyframe timeline and export the CSS.

Link Underline Animation

Animated hover underlines for links that slide, grow, sweep or highlight.

Loading Screen Generator

Full-page preloader overlay that fades out when the page loads.

Loading Spinner

Design a CSS loading spinner and copy the code.

Logo Reveal

Animate a wordmark reveal and copy the CSS.

Logo Scroller

Build a seamless infinite logo marquee in pure CSS.

Magnetic Button

Build a button that is pulled toward the cursor as it approaches.

Modal Builder

Build an accessible modal window with the native dialog element.

Moving Background

Endlessly panning stripes, grid or dots in pure CSS.

News Ticker

Build a scrolling breaking news headline bar with a pause button.

Off-Canvas Menu

Build an accessible slide-out side menu with an overlay and focus trap.

Orbit Animation

Planets circling a glowing sun on dashed rings.

Parallax Builder

Build a layered CSS parallax section with scroll-driven animations.

Particle Background

Build a drifting network of connected dots, no library.

Ripple Effect

Material-style click ripple for buttons in pure CSS.

Scanline Effect

Retro CRT scanlines with an optional sweeping band.

Scroll Animation

Preview scroll reveal effects and copy the CSS or JS.

Shimmer Effect

Sweeping loading shimmer for placeholder cards in pure CSS.

Skeleton Loader Generator

CSS skeleton screen placeholders with shimmer or pulse animation.

Slide-In Generator

Generate a CSS slide in animation from any side.

Snow Effect

Add gently falling, drifting snow behind a section.

Social Proof Popup

Build a corner toast that cycles recent-activity messages.

Sparkle Text Effect

Little stars that twinkle around a word or heading.

Spotlight Effect

A soft glow that follows the mouse across your hero.

Staggered Animation Builder

Make list items animate in one after another with CSS.

Starfield Background

Make stars stream past as if flying through space.

Stats Counter

Build a row of stats that count up when scrolled into view.

Stop Motion Recorder

Capture frames with your webcam and turn them into a stop motion video.

SVG Path Draw

Animate SVG paths drawing themselves and copy the CSS.

Synthwave Grid Background

Retro 80s neon grid floor with a striped sunset sun.

Text Animation

Animate a headline letter by letter and copy the CSS.

Text Scramble Effect

Make a headline decode from random characters with pure CSS.

Torn Paper Edge

A ripped, jagged paper edge on a card or section.

Vertical Ticker

Build a ticker that rotates headlines one at a time, sliding up.

Wavy Text Animation

Letters that bob up and down in a rolling wave.