10,238 free CSS effects

No dependencies, no build step. Copy, paste, it works.

Popular effects

The most viewed effects in the library.

Church Togglecheck-church

Abalone Shellbtn-abalone

Power On Togglecheck-power

Bronze Achievement Cardcard-achievement-bronze

Deep Abyssbg-abyss-deep

De Stijl Mondrianbg-de-stijl-mondrian

Buttons

Interactive buttons, calls to action, and polished press states.

View all 860 effects

Abalone Shellbtn-abalone

Alpine Peakbtn-alpine

Birch Trunkbtn-birch

3D Push Buttonbtn-3d-push

Aurora Borealisbtn-aurora-borealis

Blade Slash Buttonbtn-blade

Cards

Content cards, product surfaces, and layered interface panels.

View all 860 effects

Bronze Achievement Cardcard-achievement-bronze

Alarm Cardcard-alarm

Character Sheet Cardcard-character-sheet

Archer Cardcard-archer

Locked Achievement Cardcard-achievement-locked

Article Cardcard-article-card

Loaders

Spinners, progress indicators, skeletons, and loading motion.

View all 859 effects

Baguette Sliceloader-baguette-slice

Wormhole Tunnelloader-wormhole-tunnel

7 Segment Displayloader-7-segment

Billiards Cueloader-billiards-cue

Black Holeloader-black-hole

Elevatorloader-elevator

Text

Animated typography, gradients, reveals, and text treatments.

View all 860 effects

Bicolor Gradienttext-bicolor-gradient

Chess Knighttext-chess-knight

Chevron Arrowstext-chevron-arrows

Fade Depthtext-fade-depth

Fade Pulse Deeptext-fade-pulse-deep

Magenta Poptext-magenta-pop

Backgrounds

Full-frame gradients, patterns, atmospheres, and animated scenes.

View all 860 effects

Deep Abyssbg-abyss-deep

De Stijl Mondrianbg-de-stijl-mondrian

Aurora Curtainbg-aurora-curtain

Brown Noisebg-brown-noise-warm

Cassette Rewindbg-cassette-rewind

Chrome Bubblebg-chrome-bubble-reflect

Checkboxes

Custom checkboxes, radio controls, and selection states.

View all 900 effects

Church Togglecheck-church

Power On Togglecheck-power

Laptop Work Togglecheck-laptop

3D Press Checkcheck-press-3d

Plum Color Togglecheck-color-plum

3D Y-Axis Flipcheck-rotate-3d-y

Toggles

Toggle controls with clear states and refined transitions.

View all 860 effects

Active / Inactivetoggle-active-inactive

Frozen / Meltedtoggle-frozen-melted

Equalizer Wavetoggle-equalizer-wave

Hot / Coldtoggle-hot-cold

Arrow / Dotstoggle-arrow-dots

Terminal Prompttoggle-terminal-prompt

Hover Effects

Micro-interactions and motion triggered by pointer input.

View all 860 effects

3D Parallax Tilthover-3d-parallax

Orbit Spiralhover-orbit-spiral

3D Tilt Followhover-3d-tilt-follow

Quiver Hardhover-quiver-hard

Aperture Iris Closehover-aperture-iris

Blink Swaphover-blink

Badges

Status labels, notification counters, and compact indicators.

View all 610 effects

Action Copy Badgebadge-action-copy

Common Badgebadge-achievement-common

Solid Sky Pillbadge-color-sky

Solid Teal Pillbadge-color-teal

Iridescent Glass Badgebadge-glass-iridescent

Action Edit Badgebadge-action-edit

Forms

Inputs, validation states, focus treatments, and form layouts.

View all 537 effects

Midnight Background Inputform-bg-midnight

Blur Background Inputform-bg-blur

Bottom Only Border Inputform-border-bottom

Bounce Arrow Dropdownform-dropdown-bounce

Frosted Glass Inputform-bg-frosted

Glassmorphism Inputform-bg-glass

Navigation

Menus, tabs, breadcrumbs, and navigation components.

View all 562 effects

Floating Bottom Navnav-bottomnav-floating

Horizontal Bottom Dot Navnav-dotnav-horizontal-bottom

Color Shift Navbarnav-color-shift

3D Chevron Breadcrumbsnav-crumb-3d-chevron

Arrow Curve Bend Navbarnav-arrow-curve-bend

Neon Active Drawer Navbarnav-drawer-neon-active

Tooltips

Contextual hints, popovers, callouts, and directional arrows.

View all 610 effects

3D Fold Origamitip-3d-fold-origami

3D Cube Spintip-3d-cube-spin

Square Arrow Lefttip-arrow-square-left

Snow Wintertip-snow-winter

Chevron Arrowtip-arrow-chevron

3D Rotate Ytip-3d-rotate-y

Accordions

Collapsible panels, FAQ lists, and disclosure widgets in pure CSS.

View all 100 effects

Rivet Downloads Accordionacc-rivet-downloads

Drift Blind Accordionacc-drift-blind

Echo Origami Accordionacc-echo-origami

Flux Page Accordionacc-flux-page

Gear Release Accordionacc-gear-release

Ridge Search Accordionacc-ridge-search

Alerts

Notification boxes, status messages, toasts, and inline banners.

View all 100 effects

Frost Banner Alertalert-frost-banner

Ivory Sticker Alertalert-ivory-sticker

Ridge Underline Alertalert-ridge-underline

Ripple Copy Alertalert-ripple-copy

Tether Bulk Alertalert-tether-bulk

Turbine Camera Alertalert-turbine-camera

Avatars

Profile frames, presence dots, initials, and stacked avatar groups.

View all 100 effects

Copper Verified Badge Avatarava-copper-verified

Glide Scrollable Avatar Railava-glide-track

Amber Stacked Avatar Groupava-amber-stack

Circuit Broadcast Wave Avatarava-circuit-wave

Dynamo Drawn Monogram Plateava-dynamo-scribe

Gear Crown Leader Avatarava-gear-crown

Modals

Dialog windows, drawers, and sheets that open without JavaScript.

View all 100 effects

Drift Recipe Modalmodal-drift-recipe

Chalk Note Modalmodal-chalk-note

Echo Invite Modalmodal-echo-invite

Halo Weather Modalmodal-halo-weather

Lapis Stack Modalmodal-lapis-stack

Lull Stock Modalmodal-lull-stock

Progress

Progress bars, rings, meters, and completion indicators.

View all 100 effects

Oasis Stairs Progressprog-oasis-stairs

Origami Cusp Progressprog-origami-cusp

Amber Sheen Progressprog-amber-sheen

Anvil Stroke Progressprog-anvil-stroke

Bearing Heat Progressprog-bearing-heat

Blush Bloom Progressprog-blush-bloom

Sliders

Range input designs with custom tracks, thumbs, and fills.

View all 100 effects

Valve Thermostat Leverrange-valve-thermostat

Anvil Type Sizerange-anvil-typesize

Caliper Brake Biasrange-caliper-brake

Canyon RGB Channelsrange-canyon-rgb

Cove Circular Framerange-cove-circle

Quartz Gradient Sliderrange-quartz-gradient

Tabs

Tabbed panels and segmented controls driven by radio inputs.

View all 100 effects

Savanna Divided Tabstab-savanna-divider

Marble Topline Tabstab-marble-topline

Chalk Rounded Tabstab-chalk-rounded

Cobalt Stepper Tabstab-cobalt-stepper

Nickel Notch Tabstab-nickel-notch

Summit Full Width Tabstab-summit-full

Tables

Data tables with row highlights, sticky headers, and clear rhythm.

View all 100 effects

Chassis Permission Gridtbl-chassis-perms

Fjord Heatmap Cellstbl-fjord-heatmap

Lagoon Empty Statetbl-lagoon-empty

Willow Header Iconstbl-willow-icons

Amber Compact Rowstbl-amber-compact

Anvil Error Rankingtbl-anvil-errors

Timelines

Vertical and horizontal timelines, milestones, and step markers.

View all 100 effects

Conduit Deploy Stagestl-conduit-deploy

Cusp Roadmap Timelinetl-cusp-roadmap

Granite Branch Timelinetl-granite-branch

Piston Pump Pipelinetl-piston-pump

Sway Album Timelinetl-sway-album

Dash Career Timelinetl-dash-career

Marquees

Infinite scrolling strips, logo belts, and continuous ticker rows.

View all 100 effects

Cusp Timestamp Feedmq-cusp-timestamps

Drift Quote Pairmq-drift-quotepair

Amber Hover Holdmq-amber-hoverhold

Canyon LED Matrixmq-canyon-ledmatrix

Kiln Equalizer Flowmq-kiln-equalizer

Obsidian Credits Rollmq-obsidian-credits

Build and learn

ToolsGradient, shadow, radius and easing-curve generators GuidesTechnique guides, linked to real effects ReferenceCSS property reference with live examples

Frequently asked questions

Are the effects really free?: Yes. Every CSS effect in the library is free for personal and commercial projects. Advertising covers the site's costs.
Why do I need an account?: You can view previews and part of the code without an account. A free account unlocks full source, copying, and the in-browser editor.
Do I need to install a library?: No. Every effect is written in pure CSS, with no build step, JavaScript library, or dependency. Copy the HTML and CSS you need.
Can I adapt an effect to my design?: Yes. Use the editor on each effect page to change colors, durations, and sizes, preview the result immediately, and copy the complete revised code.