Most Popular CSS Effects (Page 63)

Live preview Forms

Floating Label Textarea

Textarea with a floating label that animates on focus.

#shadow #border

Live preview Forms

Glow Textarea

Textarea with a soft glow effect on focus.

#shadow #border

Live preview Forms

Minimal Textarea

Clean minimal textarea with thin border.

#shadow #border

Live preview Forms

Resizable Textarea

Textarea with visible resize handle styling.

#gradient #shadow #border

Live preview Forms

Rounded Textarea

Fully rounded textarea with smooth corners.

#shadow #border

Live preview Forms

Underline Textarea

Minimalist textarea with just a bottom underline.

#border

Live preview Forms

3D Pressable Input

3D input that appears to depress when focused.

#gradient #transform #shadow

Live preview Forms

Aurora Background Input

Input with shifting aurora gradient background.

#animation #gradient #border

Live preview Forms

Cyberpunk Neon Input

Cyberpunk styled input with neon pink-cyan glow and corner cuts.

#shadow #border

Live preview Forms

Dark Theme Input

Dark themed input with gradient background and indigo glow on focus.

#gradient #shadow #border

Live preview Forms

Elevated Card Input

Input wrapped in an elevated card that lifts higher on focus.

#transform #shadow #border

Live preview Forms

Dark Glassmorphism Input

Frosted dark glass input with backdrop blur and gradient sheen.

#gradient #shadow #border

Live preview Forms

Animated Gradient Border Input

Input with animated rotating gradient border around it.

#animation #gradient #border

Live preview Forms

Light Theme Input

Clean light theme input with subtle shadow and rounded corners.

#shadow #border

Live preview Forms

Minimal Underline Input

Ultra minimal input with only a bottom underline that grows on focus.

#transform #border

Live preview Forms

Monochrome Theme Input

Pure monochrome grayscale input with subtle elevation.

#shadow #border

Live preview Forms

Neon Glow Input

Input with bright neon cyan glow effect on focus.

#shadow #border

Live preview Forms

Paper Texture Input

Vintage paper styled input with warm tones and serif font.

#gradient #shadow #border

Live preview Forms

Pastel Soft Input

Soft pastel themed input with candy colors and rounded corners.

#shadow #border

Live preview Forms

Retro Terminal Input

Old terminal CRT style with green phosphor text.

#shadow #border

Live preview Forms

Vaporwave Gradient Input

Vaporwave aesthetic with pink-purple gradient and retro grid.

#gradient #shadow #border

Live preview Forms

Underline Focus Field

A minimal field where only the baseline exists, and it fills in from the centre.

#gradient #transform #border

Live preview Forms

Valid Background Input

Background subtly turns green-tinted when valid.

#gradient #shadow #border

Live preview Forms

Valid Border Bottom Input

Underline turns green when content is valid.

#border

Live preview Forms

Valid Bounce Input

Input bounces once when content becomes valid.

#animation #transform #shadow

Live preview Forms

Animated Check Mark Input

Checkmark draws itself in SVG-style when valid.

#animation #transform #shadow

Live preview Forms

Valid Fade In Message

Success message fades in below input when valid.

#shadow #border

Live preview Forms

Valid Green Glow Input

Input emits a soft green glow when content is valid.

#shadow #border

Live preview Forms

Valid Green Border Input

Input that turns entirely green when valid.

#shadow #border

Live preview Forms

Valid Icon Pop Input

Green icon pops in with elastic bounce when valid.

#animation #transform #shadow

Live preview Forms

Valid Message Input

Input that shows a green success message below when valid.

#transform #shadow #border

Live preview Forms

Valid Pulse Input

Input border pulses green when content is valid.

#animation #shadow #border

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

Afterimage Trail

Multiple ghost copies trail behind the label as it slides on hover.

#hover #transform #filter

Live preview Hover

Ambient Glow Fill

Ambient glow fills the surface on hover.

#hover #gradient

Live preview Hover

Aperture Iris Open

Camera aperture opens to reveal on hover.

#hover #gradient

Live preview Hover

Arrow Nudge

Link text with an arrow icon that nudges to the right on hover.

#hover #transform

Live preview Hover

Aura Radiate

Soft aura radiates outward on hover.

#hover #shadow

Live preview Hover

Backlit Silhouette

Strong backlight silhouettes the element on hover.

#hover #gradient #filter

Live preview Hover

Backspin

Element backspins on hover.

#hover #transform #3d

Live preview Hover

Barn Door Close

Two-panel barn door closes on hover.

#hover #transform

Live preview Hover

Barn Door Horizontal

Horizontal barn doors open on hover.

#hover #transform

Live preview Hover

Barn Door Open

Two panels split apart like barn doors on hover.

#hover #transform

Live preview Hover

Barn Door Vertical

Vertical barn doors open on hover.

#hover #transform

Live preview Hover

Beam Sweep

Vertical light beam sweeps across on hover.

#hover #gradient #transform

Live preview Hover

Beat Heart

Heartbeat double-thump on hover.

#hover #animation #transform

Live preview Hover

BG Aurora Drift

Aurora-like waves drift on hover.

#hover #animation #gradient

Live preview Hover

BG Blur Overlay

Blurred overlay covers background on hover.

#hover #gradient #filter

Live preview Hover

BG Circuit Trace

Circuit lines trace on background on hover.

#hover #animation #gradient

Live preview Hover

BG Color Cycle

Background cycles through colors on hover.

#hover #animation

Live preview Hover

BG Confetti Fall

Confetti pattern falls on background on hover.

#hover #animation #gradient

Live preview Hover

BG Gradient Rotate

Background gradient rotates on hover.

#hover #animation #gradient

Live preview Hover

BG Grid Scroll

Grid pattern scrolls on hover.

#hover #animation #gradient

Live preview Hover

BG Mesh Shift

Mesh gradient layers shift on hover.

#hover #gradient

Live preview Hover

BG Noise Shimmer

Noise texture shimmers on hover.

#hover #animation #gradient

Live preview Hover

BG Parallax Shift

Background layers shift on hover.

#hover #gradient

Live preview Hover

BG Pattern Move

Background pattern shifts on hover.

#hover #animation #gradient

Live preview Hover

BG Radial Pulse

Radial gradient pulses on hover.

#hover #animation #gradient

Live preview Hover

BG Scan Line

Scan line passes over background on hover.

#hover #animation #gradient

Live preview Hover

BG Shimmer

Shimmer sweeps across background on hover.

#hover #gradient #transform

Live preview Hover

BG Spotlight Reveal

Spotlight reveals hidden bg on hover.

#hover #gradient

Live preview Hover

BG Stripe Roll

Diagonal stripes roll on hover.

#hover #animation #gradient

Live preview Hover

BG Vignette Pulse

Vignette pulses around edges on hover.

#hover #animation #gradient

Live preview Hover

BG Water Ripple

Water-like ripple on hover.

#hover #animation #gradient

Live preview Hover

BG Zoom Pan

Background zooms and pans on hover.

#hover #gradient

Live preview Hover

Blacklight Glow

UV blacklight glow on hover.

#hover #shadow

Live preview Hover

Blinds Open

Vertical blinds open on hover.

#hover #transform

Live preview Hover

Blinds Roll Up

Horizontal venetian blind slats roll up one-by-one to reveal content on hover.

#gradient #hover #shadow

Live preview Hover

Bloom Glow

Soft bloom-like glow softens on hover.

#hover #shadow #filter

Live preview Hover

Blue Shift

Hue rotates to blue on hover.

#hover #transform #filter

Live preview Hover

Blur In Clear

Element starts blurred, sharpens on hover.

#hover #filter

Live preview Hover

Bob Float

Element bobs up and down on hover.

#hover #animation #transform

Live preview Hover

Boing Up

Boing-like spring upward on hover.

#hover #animation #transform

Live preview Hover

Border Beam Trace

Light beam traces around border on hover.

#hover #animation #gradient

Live preview Hover

Border Conic Spin

Conic gradient border spins on hover.

#hover #animation #gradient

Live preview Hover

Border Corner Accent

Corner accent brackets grow on hover.

#hover #border

Live preview Hover

Corner Bracket Frame

Four corner brackets slide inward and lock around the content when hovered.

#hover #transform #border

Live preview Hover

Border Dotted March

Dotted border marches around on hover.

#hover #animation #border

Live preview Hover

Border Double Line

Double-line border draws on hover.

#hover #shadow #border

Live preview Hover

Border Neon Edge

Neon glow edge border on hover.

#hover #shadow #border

Live preview Hover

Border Pulse Glow

Border pulses with glow on hover.

#hover #animation #shadow

Live preview Hover

Border Unwrap

Border unwraps from one side on hover.

#hover #border

Live preview Hover

Bounce Diagonal

Bounces diagonally on hover.

#hover #animation #transform

Live preview Hover

Bounce Down

Element bounces downward on hover.

#hover #animation #transform

Live preview Hover

Bounce Jelly

Wobbly jelly bounce on hover.

#hover #animation #transform

Live preview Hover

Bounce Left

Element bounces to the left on hover.

#hover #animation #transform

Live preview Hover

Bounce Random

Erratic random bounces on hover.

#hover #animation #transform

Live preview Hover

Bounce Right

Element bounces to the right on hover.

#hover #animation #transform

Live preview Hover

Bounce Rubber

Rubbery stretch bounce on hover.

#hover #transform

Live preview Hover

Bounce Spring

Spring-loaded bounce on hover.

#hover #animation #transform

Live preview Hover

Bounce Up

Element bounces upward in a spring motion on hover.

#hover #animation #transform

Live preview Hover

Bow Down

Element bows down on hover.

#hover #transform

Live preview Hover

Deep Breathe

Deep breathing scale on hover.

#hover #animation #transform

Live preview Hover

Breathe Scale

Element breathes in and out on hover.

#hover #animation #transform

Live preview Hover

Soft Breathe

Soft breathing animation on hover.

#hover #animation #transform

Browse by category

Popular tags