Most Popular CSS Effects (Page 3)

Live preview Cards

Beach Resort Card

Beach resort card with cabana, umbrellas, and water temp.

#gradient #shadow

Live preview Cards

Beer Flight Card

Beer flight card with sample glasses and ABV range.

#gradient #shadow #border

Live preview Cards

Beer Pair Tips Card

Beer pairing tips card with beer style, dish pairing, and reasoning.

#gradient #shadow #border

Live preview Cards

Circuit Diagram Card

Circuit diagram card with battery, switch, and bulb.

#gradient #shadow #border

Live preview Cards

Climb Pitch Card

Rock climbing pitch card with grade, length, and protection.

#gradient #shadow #border

Live preview Cards

Cocktail Menu Card

Cocktail menu card with a glass illustration, ABV, and tasting notes.

#gradient #shadow #border

Live preview Cards

Codex Lore Card

Codex lore card with an illuminated initial, parchment, and ornate border.

#gradient #shadow #border

Live preview Cards

Coffee Passport

Coffee passport card with stamp grid, roast notes, and a bean icon.

#gradient #transform #shadow

Live preview Cards

Cotton Candy Card

Cotton candy card with fluffy texture and pastel colors.

#gradient #shadow #border

Live preview Cards

Discount Coupon

Coupon card with scissors, a dashed cut line, notch cutouts and a big discount percentage.

#gradient #shadow #border

Live preview Cards

Credit Card

Realistic credit card with a gold chip, embossed number, brand mark and details.

#gradient #hover #3d

Live preview Cards

Diet Plan Card

Daily diet plan card with meal slots and macros split.

#shadow #border

Live preview Cards

Earthquake Card

Earthquake alert card with magnitude, depth, and epicenter.

#gradient #shadow #border

Live preview Cards

Energy Type Card

Energy type card showing kinetic vs potential with formula.

#gradient #shadow #border

Live preview Cards

Estimate Card

Service estimate card with breakdown and labor hours.

#shadow #border

Live preview Cards

Invite Only Card

Invite-only card with an envelope flap, wax seal, and elegant calligraphy title.

#gradient #transform #shadow

Live preview Cards

Student ID

Student ID card with a portrait, university header, and a barcode strip.

#gradient #shadow #border

Live preview Cards

Vocabulary Word Card

Vocabulary word card with definition, pronunciation, and example.

#shadow #border

Live preview Cards

YouTube Video Card

YouTube-style video card with thumbnail, duration badge, title, and channel.

#gradient #shadow

Live preview Checkboxes

3D Pyramid Check

A 3D pyramid that flips and turns gold when checked.

#transform #border #3d

Live preview Checkboxes

Accordion Toggle

An accordion expands in red when checked.

#transform #shadow #filter

Live preview Checkboxes

Amber Fossil Stone

A golden amber stone reveals an ancient inclusion when checked.

#gradient #transform #shadow

Live preview Checkboxes

Apartment Toggle

An apartment building scales in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Avocado Ripe Toggle

An avocado glows green when ripe and checked.

#transform #shadow #filter

Live preview Checkboxes

Bacon Sizzle Toggle

A bacon strip wiggles with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Banjo Toggle

A banjo slides in brown when checked.

#transform #shadow #filter

Live preview Checkboxes

Battery Charge Toggle

A battery glows green when checked.

#animation #transform #shadow

Live preview Checkboxes

Circle Stroke Draw

An SVG circle outline draws itself around a center dot that pops in when checked.

#border #transform #rotate

Live preview Checkboxes

Espresso Toggle

An espresso pulses brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Hourglass Checkbox

The glass rotates half a turn and the sand settles into the lower bulb.

#clip-path #transform #border

Live preview Checkboxes

Pulsar Radio Beams

Concentric radio waves pulse outward when this star is checked.

#animation #transform #shadow

Live preview Checkboxes

Ripple Burst Check

Toggling on triggers an expanding ripple ring around the checkbox.

#animation #border #transform

Live preview Checkboxes

Scale Pop Checkmark

The checkmark scales up with overshoot then settles, paired with a soft background.

#border #transform #rotate

Live preview Checkboxes

Silverfish Toggle

A silverfish spins gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Sparkle Twinkle

A four-pointed sparkle that twinkles in with a magenta glow and slow spin when checked.

#animation #shadow #border

Live preview Checkboxes

Psi Symbol Toggle

The Greek psi letter slides in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Tarot Card Reveal

A mystical tarot card flips to reveal its face when checked.

#gradient #transform #border

Live preview Checkboxes

Pickup Truck Toggle

A pickup truck bounces in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Wifi Signal Toggle

An SVG wifi icon lights up in cyan with a soft glow when the device goes online.

#shadow #border #filter

Live preview Forms

Frosted Glass Input

Heavy frost effect with crystalline texture overlay.

#shadow #border #filter

Live preview Forms

Glassmorphism Input

Frosted glass input with backdrop blur and translucent border.

#shadow #border #filter

Live preview Forms

Stars Background Input

Cosmic starfield background with twinkling dots.

#animation #gradient #shadow

Live preview Forms

Dashed Border Input

Input with a dashed border that solidifies on focus.

#shadow #border

Live preview Forms

Glow Accent Dropdown

Dropdown with soft glow accent on entire control.

#shadow #border

Live preview Forms

Popup Style Dropdown

Dropdown that opens a popup panel with detailed options.

#hover #transform #shadow

Live preview Forms

Letter Spacing Floating Label

Label expands its letter spacing as it lifts up.

#transform #border

Live preview Forms

Pill Floating Label

Rounded pill input whose label slides into a small floating chip.

#transform #shadow #border

Live preview Forms

Rotate Floating Label

Label rotates 90 degrees then settles above the input.

#transform #shadow #border

Live preview Forms

Scale Down Floating Label

Label shrinks to the corner with a smooth scale-down motion.

#transform #border

Live preview Forms

Both Icons Input

Input with icons on both left and right sides.

#transform #shadow #border

Live preview Forms

Invalid Icon Input

Input with a red X icon that appears when invalid.

#transform #shadow #border

Live preview Forms

Retro Terminal OTP

Old terminal-style OTP with green phosphor text.

#shadow #border

Live preview Forms

Checkmark Radio

Radio that displays an animated checkmark inside the circle when picked.

#transform #border

Live preview Forms

Flip Radio

Radio card flips in 3D when selected.

#gradient #transform #border

Live preview Forms

Glass Search Bar

Frosted glass search bar with translucent background.

#transform #shadow #border

Live preview Forms

Skeuomorphic 3D Input

Realistic 3D input with pressed-in appearance and bevels.

#gradient #shadow #border

Live preview Hover

Border Gradient Flow

Animated gradient border flows on hover.

#hover #animation #gradient

Live preview Hover

Color Invert Pill

Pill swaps its background and text colors instantly on hover.

#hover #border #transform

Live preview Hover

Contrast Punch

Contrast spikes for a punchy look on hover.

#hover #gradient #filter

Live preview Hover

Edge Light Up

All four edges light up on hover.

#hover #shadow

Live preview Hover

Needle Right Edge

Vertical needle bar slides in from right edge on hover.

#hover #animation #gradient

Live preview Hover

Flash Edges

Edges flash bright white on hover.

#hover #animation #shadow

Live preview Hover

Dashes Crawl Frame

Dashed border marches around the element on hover.

#hover #animation #border

Live preview Hover

Inset Bevel Frame

Inset beveled frame creates depth on hover.

#hover #transform #shadow

Live preview Hover

Glitter Shimmer

Glitter shimmers across surface on hover.

#hover #animation #gradient

Live preview Hover

Glitter Sparkle

Glitter sparkles on hover.

#hover #animation #gradient

Live preview Hover

Icon Jump Link

The arrow leaps forward and the label shifts slightly to follow it.

#hover #transform

Live preview Hover

Pixelate In

Pixelate snap-in on hover.

#hover #filter

Live preview Hover

Rotate 3D Flip

Single 3D flip on hover.

#hover #transform #3d

Live preview Hover

Slide Random Reveal

Random-direction slide reveal on hover.

#hover #transform

Live preview Hover

Squash Pancake

Squashes flat as pancake on hover.

#hover #transform

Live preview Hover

Pop Letter

Letters pop up sequentially on hover.

#hover #animation #transform

Live preview Hover

Soft Shadow Text

Soft blurred shadow on text on hover.

#hover #shadow

Live preview Hover

Topspin

Element topspins forward on hover.

#hover #transform #3d

Live preview Hover

Tritone Forest

Earthy forest tritone gradient on hover.

#hover #gradient #shadow

Live preview Hover

Typewriter Reveal

Text types out character by character on hover.

#hover #animation

Live preview Hover

Warm Overlay

Warm orange overlay washes in on hover.

#hover #gradient

Live preview Hover

Wipe Down

New color wipes down from top on hover.

#hover #transform

Live preview Hover

3D Zoom Tilt

3D zoom tilt transform on hover.

#hover #transform #shadow

Live preview Loaders

Actuator

Linear actuator extending arm.

#animation #gradient

Live preview Loaders

Arc Sweep

Arc sweeping around a center point.

#animation #transform #border

Live preview Loaders

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Live preview Loaders

Axe Chop

Axe chopping down into a wooden log repeatedly.

#animation #gradient #transform

Live preview Loaders

Barbell Press

Barbell being pressed up.

#animation #gradient

Live preview Loaders

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

#animation #gradient #transform

Live preview Loaders

Blender Blade

Blender jar with whirring blades at the bottom.

#animation #gradient #transform

Live preview Loaders

Caliper Measure

Digital caliper jaws opening and closing to measure.

#animation #gradient

Live preview Loaders

Camera Shutter

Camera shutter opening and closing.

#animation #transform

Live preview Loaders

Camshaft

Camshaft with egg-shaped lobes.

#animation #gradient #transform

Live preview Loaders

Candle Clock

Candle burning down as time passes.

#animation #gradient #transform

Live preview Loaders

Candle Flame

Candle flame flickering.

#animation #gradient #transform

Live preview Loaders

Cannon Fire

Cannon with periodic fire burst.

#animation #gradient #transform

Live preview Loaders

Checkers Jump

Checker piece jumping over another.

#animation #gradient

Live preview Loaders

Dynamo

Dynamo generating spark.

#animation #gradient #transform

Live preview Loaders

Flash Flood

Flash flood water rising rapidly.

#animation #gradient #border

Live preview Loaders

Flip Card

A gradient card flipping 180 degrees back and forth on its vertical axis.

#gradient #animation #3d

Browse by category

Popular tags