#3d CSS effects

195 free, pure-CSS effects match the "3d" tag. Each is copy-ready and needs no library or build step.

Live preview Hover

3D Parallax Tilt

Layers shift in 3D based on cursor position for a parallax depth effect.

#gradient #3d #shadow

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Checkboxes

3D Press Check

A chunky 3D button-style checkbox that presses down and turns green when checked.

#3d #shadow #border

Live preview Checkboxes

3D Y-Axis Flip

A 3D flip on the Y axis revealing a checkmark on the back face.

#transform #border #3d

Live preview Backgrounds

Diagonal Moving Lines

Crisp neon diagonal lines sweep across a dark backdrop like a synth scan.

#gradient #animation #3d

Live preview Cards

Credit Card

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

#gradient #hover #3d

Live preview Checkboxes

3D Pyramid Check

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

#transform #border #3d

Live preview Checkboxes

Tarot Card Reveal

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

#gradient #transform #border

Live preview Forms

Flip Radio

Radio card flips in 3D when selected.

#gradient #transform #border

Live preview Hover

Rotate 3D Flip

Single 3D flip on hover.

#hover #transform #3d

Live preview Hover

Topspin

Element topspins forward on hover.

#hover #transform #3d

Live preview Hover

3D Zoom Tilt

3D zoom tilt transform on hover.

#hover #transform #shadow

Live preview Loaders

Flip Card

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

#gradient #animation #3d

Live preview Navigation

Active Flip Pagination

Active page flips on Y axis.

#hover #transform #shadow

Live preview Backgrounds

Confetti Fall

Colorful confetti pieces tumble downward in celebration.

#gradient #animation #3d

Live preview Backgrounds

Fireworks Burst

Colorful fireworks burst and fade over a starry night sky.

#gradient #animation #3d

Live preview Backgrounds

Retro Sunset

A striped retro sun sets behind an animated horizon line in classic 80s style.

#gradient #animation #3d

Live preview Buttons

Wobble Button

Purple outline button that wobbles playfully once when hovered.

#animation #hover #3d

Live preview Cards

Flip Flashcard Card

3D flip flashcard with term on front and definition on back.

#hover #gradient #transform

Live preview Cards

Flip Reveal Card

The card rotates on its vertical axis to show the details written on the back.

#hover #transform #3d

Live preview Cards

Sticky Note

Yellow sticky note with tape on top, a checklist and a curled bottom corner.

#gradient #3d #shadow

Live preview Checkboxes

Fold Flip Checkbox

The box rotates on its X axis and lands on a green face carrying the tick.

#transform #border #3d

Live preview Forms

Flip Icon Input

Input whose icon flips 180 degrees on focus.

#transform #shadow #border

Live preview Forms

Flip Switch

Switch knob flips 180 degrees when toggled.

#transform #3d

Live preview Hover

3D Zoom Flip

3D combined zoom and flip on hover.

#hover #transform #3d

Live preview Hover

Flip 3D Coin

Coin-toss flip on hover.

#hover #animation #gradient

Live preview Hover

Flip 3D Door

Door-swing 3D flip on hover.

#hover #transform #border

Live preview Hover

Flip 3D Page

Page-turn 3D flip on hover.

#hover #transform #shadow

Live preview Hover

Flip Card

Card flips in 3D to reveal its back face on hover.

#gradient #hover #3d

Live preview Hover

Card Front Back Flip

Flips card to reveal back side on hover.

#hover #transform #3d

Live preview Hover

Flip Y Fast

Quick Y flip on hover.

#hover #transform #3d

Live preview Hover

Fold Double

Double fold on hover.

#hover #transform #3d

Live preview Hover

Fold Up

Folds upward on hover.

#hover #transform #3d

Live preview Hover

3D Jolt

Quick 3D jolt animation on hover.

#hover #animation #transform

Live preview Hover

3D Blinds Mask

Blinds fold in 3D on hover.

#hover #transform #3d

Live preview Hover

Cube 3D Spin Mask

Cube face rotates to reveal new content on hover.

#hover #transform #3d

Live preview Hover

Mosaic Tile Flip

A 3x3 grid of small tiles flips in 3D in a staggered wave on hover.

#gradient #hover #3d

Live preview Hover

Rotate 3D Coin

Coin-spin on Y-axis on hover.

#hover #animation #gradient

Live preview Hover

Rotate 3D Crate

Crate lid swings open on hover.

#hover #transform #border

Live preview Hover

Zoom Flip

Zoom with flip transform on hover.

#hover #transform #3d

Live preview Navigation

Slant Perspective 3D Navbar

Nav with a perspective tilt creating a 3D slanted look.

#hover #transform #shadow

Live preview Navigation

Flip Card Tabs

Tabs that flip like cards revealing back face.

#hover #gradient #transform

Live preview Navigation

3D Tilt Hover Navbar

Each link tilts in 3D space responding to hover with depth perspective.

#hover #gradient #transform

Live preview Navigation

Vertical Tab Flip Card

Vertical tabs that flip in 3D when active, revealing content.

#hover #transform #shadow

Live preview Toggles

Cube Roll 3D

Sharp cube knob rolls end-over-end across the dark track in 3D.

#gradient #transform #shadow

Live preview Toggles

Open / Closed Door

Wooden door swings open on a hinge with a 3D perspective rotation.

#gradient #3d #border

Live preview Toggles

Flip Card Toggle

The switch is a small card that rotates in 3D to show its opposite coloured face.

#transform #3d

Live preview Alerts

Bearing Payment Alert

A declined payment notice beside a tilting bank card whose chip catches the light.

#payment #card #declined

Live preview Backgrounds

Perspective Grid Scroll

Synthwave perspective grid that scrolls toward the horizon with a glowing sun.

#gradient #animation #3d

Live preview Backgrounds

Twinkling Starfield

A field of tiny stars that twinkle against the deep cosmos.

#gradient #animation #3d

Live preview Buttons

Bow Tie Button

Playful button that bows forward in a 3D tilt on hover.

#hover #gradient #transform

Live preview Buttons

Cube Fold Button

Button that folds like an unfolding cube face on hover.

#hover #transform #border

Live preview Buttons

3D Flip Button

Button that flips on its Y axis revealing a back face on hover.

#hover #transform #border

Live preview Buttons

8-bit Pixel Button

Blocky retro pixel-art button with stepped shadow and snappy press.

#hover #3d #shadow

Live preview Cards

Backstage Pass

Laminated backstage pass with a clip, spinning holographic seal and band info.

#gradient #animation #3d

Live preview Cards

3D Flip Card

Card that rotates 180 degrees on the Y axis on hover to reveal a back face.

#gradient #hover #3d

Live preview Cards

Peel Corner Card

Card whose top-right corner peels back on hover to reveal a hidden layer beneath.

#gradient #hover #3d

Live preview Cards

Polaroid Photo

Classic polaroid photo card with a white frame, image area and a handwritten caption.

#gradient #hover #3d

Live preview Cards

Pressable 3D Card

Chunky 3D card with a thick colored base that presses down flat on click.

#gradient #hover #3d

Live preview Cards

Stacked Layers Card

Stack of cards that fan out into separate layered panels on hover.

#gradient #hover #3d

Live preview Cards

3D Tilt with Glare

Card that tilts in 3D following the cursor with a moving glare highlight.

#gradient #3d #shadow

Live preview Cards

Tilt Glare Card

The card tips back in 3D while a soft glare sweeps over its surface.

#hover #gradient #transform

Live preview Checkboxes

3D Cube Check

A rotating 3D cube that turns green when checked.

#transform #border #3d

Live preview Checkboxes

Diamond Sparkle

A diamond emoji shimmers with a cyan glow and gentle rotation when toggled on.

#animation #3d #shadow

Live preview Checkboxes

3D Flip Card Check

A checkbox that flips in 3D to reveal a green check face when toggled on.

#3d #border #transform

Live preview Checkboxes

Card Flip Reveal

A card-style flip that reveals a checkmark face when checked.

#gradient #transform #border

Live preview Checkboxes

Vertical Card Flip

A vertical 3D flip that reveals the checkmark on the back.

#transform #border #3d

Live preview Checkboxes

Flip Lid Checkbox

A hinged lid swings up on its top edge and uncovers the tick underneath.

#transform #gradient #3d

Live preview Checkboxes

Medal Spin Reveal

A medal emoji spins 360 degrees on its Y-axis and shines when awarded.

#animation #3d #shadow

Live preview Checkboxes

Rocket Launch Toggle

A rocket emoji lifts off with a tilted angle and exhaust glow when launched.

#animation #3d #shadow

Live preview Checkboxes

3D X-Axis Flip

A 3D flip on the X axis revealing a checkmark on the bottom face.

#transform #border #3d

Live preview Checkboxes

Venetian Blind Checkbox

Four horizontal slats rotate shut one after another to darken the panel.

#transform #3d #border

Live preview Forms

Flip Credit Card Input

Credit card input that flips to show CVC field on focus.

#gradient #transform #shadow

Live preview Hover

3D Page Turn

Page-turn 3D effect on hover.

#hover #transform #3d

Live preview Hover

3D Zoom Tilt Pop

3D pop with tilt and zoom on hover.

#hover #transform #3d

Live preview Hover

Backspin

Element backspins on hover.

#hover #transform #3d

Live preview Hover

Cube Rotate 3D

Element rotates like a cube face on hover.

#hover #transform #3d

Live preview Hover

Flip 3D Card

Card-style 3D flip on hover.

#hover #transform #border

Live preview Hover

Soft 3D Flip

Soft 3D flip on Y-axis on hover.

#hover #transform #3d

Live preview Hover

Flip Diagonal

Element flips diagonally on hover.

#hover #transform #3d

Live preview Hover

Soft Diagonal Flip

Soft diagonal flip transform on hover.

#hover #transform #3d

Live preview Hover

Flip X Fast

Quick X flip on hover.

#hover #transform #3d

Live preview Hover

Flip X Hard

Hard full X flip on hover.

#hover #transform #3d

Live preview Hover

Flip X Slow

Slow dramatic X flip on hover.

#hover #transform #3d

Live preview Hover

Flip X Soft

Soft gentle X flip on hover.

#hover #transform #3d

Live preview Hover

Flip Y Hard

Hard full Y flip on hover.

#hover #transform #3d

Live preview Hover

Flip Y Slow

Slow dramatic Y flip on hover.

#hover #transform #3d

Live preview Hover

Flip Y Soft

Soft gentle Y flip on hover.

#hover #transform #3d

Live preview Hover

Flip Zoom

Flip with zoom on hover.

#hover #transform #3d

Live preview Hover

Fold Down

Folds downward on hover.

#hover #transform #3d

Live preview Hover

Fold Left

Folds to the left on hover.

#hover #transform #3d

Live preview Hover

Fold Origami Spread

Origami spread fold on hover.

#hover #transform #3d

Live preview Hover

Fold Right

Folds to the right on hover.

#hover #transform #3d

Live preview Hover

3D Tilt Edge Frame

Frame tilts in 3D while edges highlight on hover.

#hover #transform #shadow

Live preview Hover

Fold Out Frame

Frame panels fold outward like opening a box on hover.

#hover #transform #shadow

Live preview Hover

Twist Corner Frame

Corners twist into place with 3D rotation on hover.

#hover #transform #border

Popular tags