Most Popular CSS Effects (Page 10)

Live preview Checkboxes

Long Drum Toggle

A long drum shakes in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Minimal Line Check

A clean, borderless minimal check whose mark fades in softly when toggled on.

#border #transform #rotate

Live preview Checkboxes

Motorcycle Toggle

A motorcycle bounces in with cool glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Number 1 Toggle

Number 1 scales up blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Paw Print Toggle

A grayscale paw-print emoji fills in and pads down with a warm glow when toggled on.

#shadow #transform #filter

Live preview Checkboxes

Plug Power Toggle

A plug glows yellow when checked.

#transform #shadow #filter

Live preview Checkboxes

Plum Toggle

A plum flips purple when checked.

#transform #shadow #filter

Live preview Checkboxes

Quarter Note Toggle

A quarter note symbol fades in blue when checked.

#transform #shadow #filter

Live preview Checkboxes

Quartz Cluster Toggle

A cluster of quartz points lights up when checked.

#gradient #border

Live preview Checkboxes

Scanline Checkbox

A bright scan line sweeps down the box and leaves solid colour behind it.

#animation #clip-path #gradient

Live preview Checkboxes

Scissors Cut Toggle

Scissors snip with a gray glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Sun Brighten Toggle

A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.

#animation #shadow #transform

Live preview Checkboxes

Sunset Dusk Toggle

A sunset glows warm when checked.

#transform #shadow #filter

Live preview Checkboxes

Minus Math Symbol Toggle

A minus math symbol that turns red when checked.

#transform #shadow #filter

Live preview Checkboxes

Omega Symbol Toggle

The Greek omega letter fades violet when checked.

#shadow #filter

Live preview Checkboxes

Theta Symbol Toggle

The Greek theta letter scales pink when checked.

#transform #shadow #filter

Live preview Checkboxes

Glass Texture Toggle

A frosted glass texture with blue tint when checked.

#gradient #transform #shadow

Live preview Checkboxes

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Tornado Spin Toggle

A tornado spins gray when checked.

#transform #shadow #filter

Live preview Checkboxes

Willet Toggle

A willet flips gray when checked.

#transform #shadow #filter

Live preview Forms

Glowing Background Input

Background glows brightly on focus, color seeping outward.

#gradient #shadow #border

Live preview Forms

Gradient Background Input

Input with an animated gradient background that shifts on focus.

#gradient #shadow #border

Live preview Forms

Mesh Background Input

Input with a vibrant mesh gradient background.

#gradient #shadow #border

Live preview Forms

Neon Background Input

Dark input with neon glow background on focus.

#gradient #shadow #border

Live preview Forms

Sunken Input

Deeply sunken input that appears pressed into surface.

#shadow #border

Live preview Forms

3D Border Input

Skeuomorphic 3D raised border that depresses on focus.

#transform #shadow #border

Live preview Forms

Full Border Draw Input

Border draws itself around the input clockwise when focused.

#border

Live preview Forms

Fire Border Input

Animated fire-effect border using layered gradients.

#animation #gradient #border

Live preview Forms

Ice Border Input

Icy frosted border with crystalline shimmer.

#shadow #border

Live preview Forms

Inset Border Input

Sunken inset border that pops out on focus.

#shadow #border

Live preview Forms

Multi Color Border Input

Each side of the border has a different animated color.

#gradient #border

Live preview Forms

Rainbow Border Input

Border continuously cycles through rainbow hues.

#animation #gradient #border

Live preview Forms

Retro Terminal Border

Old terminal-style input with chunky inset border.

#shadow #border

Live preview Forms

3D Dropdown

Dropdown with 3D depth shadow on focus.

#transform #shadow #border

Live preview Forms

Action Button Dropdown

Primary action button with dropdown menu of secondary actions.

#hover #shadow #border

Live preview Forms

Date Range Dropdown

Date range picker dropdown with quick preset options.

#hover #transform #shadow

Live preview Forms

Emoji Picker Dropdown

Dropdown with emoji reactions as options.

#hover #transform #border

Live preview Forms

Gradient Border Dropdown

Dropdown with animated gradient border on focus.

#gradient #border

Live preview Forms

iOS Dropdown

iOS-inspired dropdown with rounded pill shape.

#shadow #border

Live preview Forms

Searchable Dropdown

Dropdown with search input style appearance.

#transform #shadow #border

Live preview Forms

Timezone Dropdown

Timezone picker with code formatting and clock icon.

#transform #shadow #border

Live preview Forms

Blur Floating Label

Label starts blurred then sharpens as it lifts to the top.

#transform #border #filter

Live preview Forms

Color Shift Floating Label

Label transitions through multiple hues when input is active.

#animation #transform #border

Live preview Forms

Curve Floating Label

Label arcs upward in a curved path using transform-origin trick.

#transform #shadow #border

Live preview Forms

Cyan Accent Floating Label

Crisp cyan-themed floating label input.

#transform #shadow #border

Live preview Forms

Emerald Accent Floating Label

Calm emerald-themed floating label for signup forms.

#transform #shadow #border

Live preview Forms

Floating Label Fade

Label fades and floats up smoothly using opacity transitions.

#border

Live preview Forms

iOS Style Floating Label

Clean iOS-style input with rounded corners and subtle floating label.

#shadow #border

Live preview Forms

Floating Label Slide Up

Classic floating label that slides up when the input is focused or filled.

#transform #shadow #border

Live preview Forms

Violet Accent Floating Label

Violet-themed floating label input with soft glow.

#transform #shadow #border

Live preview Forms

Animating Icon Input

Input whose left icon bounces when input is focused.

#animation #transform #shadow

Live preview Forms

Circle Icon Input

Input with circular icon container on the left.

#transform #shadow #border

Live preview Forms

Color Changing Icon Input

Input whose icon cycles through colors on focus.

#animation #transform #shadow

Live preview Forms

Email Icon Input

Email input with envelope icon that opens on focus.

#transform #shadow #border

Live preview Forms

Flip Icon Input

Input whose icon flips 180 degrees on focus.

#transform #shadow #border

Live preview Forms

Grow Icon Input

Input whose icon grows in size when focused.

#transform #shadow #border

Live preview Forms

Shrink Icon Input

Input whose icon shrinks when focused (inverse effect).

#transform #shadow #border

Live preview Forms

Tag Icon Input

Tag input with tag icon that flips in on focus.

#transform #shadow #border

Live preview Forms

Search Input with Clear Button

Search input that shows a clear (×) button when typed.

#hover #transform #shadow

Live preview Forms

Floating Label OTP

OTP boxes with floating placeholder text.

#transform #border

Live preview Forms

Credit Card Preview

Credit card visual preview that updates on input focus.

#gradient #transform #shadow

Live preview Forms

Property Focus Ring

Focusing the field animates a registered angle so the gradient ring circles it once.

#animation #gradient #at-property

Live preview Forms

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Live preview Forms

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#animation #transform #border

Live preview Forms

Thumbs Radio

Thumbs up/down radio feedback with smooth transition.

#hover #transform #filter

Live preview Forms

3D Search Bar

Skeuomorphic 3D search bar with depth.

#transform #shadow #border

Live preview Forms

Icon Background Search

Search bar with icon in a colored background square.

#transform #shadow #border

Live preview Forms

Square Select Dropdown

Sharp-cornered square select with bold border.

#transform #border

Live preview Forms

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

#shadow #border

Live preview Forms

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Live preview Forms

Emoji Switch

Toggle with emoji that swaps between states.

#gradient #transform

Live preview Forms

Flip Switch

Switch knob flips 180 degrees when toggled.

#transform #3d

Live preview Forms

Segmented Switch

Segmented toggle group with sliding indicator between options.

#hover #shadow #border

Live preview Forms

Shadow Lift Switch

Toggle knob lifts with shadow during transition.

#transform #shadow

Live preview Forms

Spotlight Switch

Toggle with radial spotlight glow around knob when active.

#gradient #transform

Live preview Forms

Bordered Textarea

Textarea with a colored left accent border.

#shadow #border

Live preview Forms

Glassmorphism Textarea

Frosted glass textarea with translucent background.

#shadow #border #filter

Live preview Forms

Brutalist Hard Edge Input

Brutalist design with hard borders, monospace and offset shadow.

#transform #shadow #border

Live preview Forms

Flat Material Input

Flat material design input with no shadows or bevels.

#border

Live preview Forms

Light Glassmorphism Input

Light frosted glass input with soft white glow on focus.

#gradient #shadow #border

Live preview Forms

Neumorphic Soft Input

Soft neumorphic input with inset shadow on focus.

#shadow #border

Live preview Forms

Valid Check Mark Input

Input that shows a green checkmark when valid.

#transform #shadow #border

Live preview Forms

Valid Icon Input

Input with a checkmark icon that appears when valid.

#transform #shadow #border

Live preview Forms

Success State Input

Input with full success state — green border, check, and label color.

#transform #shadow #border

Live preview Forms

Valid Underline Input

Bottom underline grows in green when valid.

#transform #border

Live preview Hover

3D Zoom Flip

3D combined zoom and flip on hover.

#hover #transform #3d

Live preview Hover

Acid Green Tint

Acid green tint pulses through on hover.

#hover #shadow

Live preview Hover

Blur Out

Element blurs out on hover.

#hover #filter

Live preview Hover

Bob Buoy

Buoy bobbing on water on hover.

#hover #animation #transform

Live preview Hover

Border Dash March

Dashed border marches around on hover.

#hover #animation #border

Live preview Hover

Border Draw Full

Border draws around all sides on hover.

#hover #border

Live preview Hover

Border Expand Out

Border outline expands outward on hover.

#hover #transform #border

Live preview Hover

Border Rainbow Flow

Rainbow border flows on hover.

#hover #animation #gradient

Live preview Hover

Bulge Center

Element bulges outward in center on hover.

#hover #transform

Live preview Hover

Card 3D Tilt

Element tilts in 3D like a card on hover.

#hover #gradient #transform

Live preview Hover

Bubblegum

Pink bubblegum tint on hover.

#hover #gradient

Browse by category

Popular tags