#transform CSS effects

5,765 free, pure-CSS effects match the "transform" tag. Each is copy-ready and needs no library or build step.

Live preview Forms

Fullscreen Search Bar

Search bar that expands to a large full-width style on focus.

#transform #shadow #border

Live preview Forms

Glass Search Bar

Frosted glass search bar with translucent background.

#transform #shadow #border

Live preview Forms

Glow Search Bar

Search bar with a soft glow on focus.

#transform #shadow #border

Live preview Forms

Gradient Border Search

Search bar with animated gradient border.

#animation #gradient #transform

Live preview Forms

Animated Icon Search

Search bar whose magnifier icon rotates on focus.

#transform #shadow #border

Live preview Forms

Light Search Bar

Clean light-themed search bar.

#transform #shadow #border

Live preview Forms

Search with Loading Spinner

Search bar that shows a loading spinner when typing.

#animation #transform #shadow

Live preview Forms

Magnifier Search Bar

Classic search bar with magnifier icon that pulses on focus.

#transform #shadow #border

Live preview Forms

Mic Search Bar

Search bar with a pulsing mic button on the right.

#hover #animation #transform

Live preview Forms

Minimal Search Bar

Ultra-minimal search bar with thin border.

#transform #shadow #border

Live preview Forms

Modern Search Bar

Sleek modern search bar with subtle shadow.

#transform #shadow #border

Live preview Forms

Neon Search Bar

Cyberpunk neon search bar with glowing border.

#transform #shadow #border

Live preview Forms

Overlay Search Bar

Search bar with an overlay style and shadow.

#transform #shadow #border

Live preview Forms

Pill Search Bar

Pink-accented pill-shaped search bar.

#hover #transform #shadow

Live preview Forms

Retro Terminal Search

Old terminal-style search bar with green phosphor.

#transform #shadow #border

Live preview Forms

Rounded Search Bar

Fully rounded search bar with magnifier icon.

#transform #shadow #border

Live preview Forms

Square Search Bar

Sharp-cornered square search bar with bold style.

#transform #border

Live preview Forms

Underline Search Bar

Minimalist search bar with only an underline.

#transform #border

Live preview Forms

Voice Search Bar

Search bar with a microphone icon for voice input.

#hover #transform #shadow

Live preview Forms

Custom Arrow Select

Native select with a custom animated dropdown arrow.

#transform #shadow #border

Live preview Forms

Border Accent Select

Select with a left accent color border.

#transform #shadow #border

Live preview Forms

Dark Themed Select

Sleek dark select with glowing focus state.

#transform #shadow #border

Live preview Forms

Glassmorphism Select

Frosted glass-styled select dropdown.

#transform #shadow #border

Live preview Forms

Gradient Border Select

Select wrapped with an animated gradient border.

#animation #gradient #transform

Live preview Forms

Light Themed Select

Clean light-themed select with subtle shadow.

#transform #shadow #border

Live preview Forms

Pill Select Dropdown

Pill-shaped select with colored accent.

#transform #shadow #border

Live preview Forms

Rounded Select Dropdown

Fully rounded select with pill-shaped appearance.

#transform #shadow #border

Live preview Forms

Square Select Dropdown

Sharp-cornered square select with bold border.

#transform #border

Live preview Forms

Underline Select Dropdown

Minimalist select with just an underline.

#transform #border

Live preview Forms

Bounce Slider

Slider whose thumb bounces when dragged.

#animation #transform #shadow

Live preview Forms

Gradient Thumb Slider

Slider with a colorful gradient thumb.

#animation #gradient #transform

Live preview Forms

Rotate Slider

Slider whose thumb rotates while being dragged.

#animation #gradient #transform

Live preview Forms

Rounded Slider

Range slider with rounded track and large rounded thumb.

#hover #gradient #transform

Live preview Forms

Custom Thumb Slider

Range slider with a custom-styled large thumb.

#hover #transform #shadow

Live preview Forms

Value Bubble Slider

Slider with a value bubble tooltip above the thumb.

#transform #shadow #border

Live preview Forms

Active Filled State Input

Input that highlights when it has content using :not(:placeholder-shown).

#transform #shadow #border

Live preview Forms

Disabled State Input

Input in disabled state with greyed out styling and not-allowed cursor.

#transform #border #filter

Live preview Forms

Error State Input

Input showing error state with red border, glow and message.

#animation #transform #shadow

Live preview Forms

Hover Lift Input

Input that lifts slightly with shadow on hover.

#hover #transform #shadow

Live preview Forms

Loading Spinner Input

Input with loading spinner indicating async validation.

#animation #transform #shadow

Live preview Forms

Readonly State Input

Readonly input with distinct styling that shows content cannot change.

#transform #border

Live preview Forms

3D Switch

Switch with 3D depth and pressed knob effect.

#transform #shadow

Live preview Forms

3D Press Switch

Switch knob depresses 3D-style when toggled.

#gradient #transform #shadow

Live preview Forms

Material Switch

Material Design Android switch with ripple and elevated knob.

#transform #shadow

Live preview Forms

Aurora Switch

Toggle with aurora-like gradient when active.

#animation #gradient #transform

Live preview Forms

Bold Switch

Bold chunky toggle with thick knob and prominent track.

#transform #border

Live preview Forms

Bounce Switch

Toggle knob bounces in with springy overshoot motion.

#animation #transform

Live preview Forms

Checkmark Switch

Toggle that displays a checkmark icon when active.

#transform

Live preview Forms

Color Cycling Switch

Switch track cycles through rainbow colors when active.

#animation #gradient #transform

Live preview Forms

Cyber Switch

Cyberpunk switch with angular shapes and glitch aesthetic.

#transform #shadow #border

Live preview Forms

Dark Switch

Dark theme toggle with subtle elevated knob on activation.

#transform #shadow #border

Live preview Forms

Disabled Switch

Toggle demonstrating disabled state with reduced opacity.

#transform

Live preview Forms

Double Knob Switch

Toggle with two knobs that swap positions when toggled.

#transform

Live preview Forms

Elastic Switch

Knob stretches elastically as it slides across track.

#animation #transform

Live preview Forms

Emoji Switch

Toggle with emoji that swaps between states.

#gradient #transform

Live preview Forms

Fade Switch

Switch track fades between two color states smoothly.

#transform

Live preview Forms

Fill Track Switch

Track fills with gradient from left when toggled on.

#gradient #transform

Live preview Forms

Flat Switch

Minimal flat toggle with clean lines and simple motion.

#transform #shadow

Live preview Forms

Flip Switch

Switch knob flips 180 degrees when toggled.

#transform #3d

Live preview Forms

Fluent Switch

Microsoft Fluent design toggle with subtle motion and accent color.

#transform #border

Live preview Forms

Glass Switch

Frosted glassmorphism switch with backdrop blur effect.

#gradient #transform #border

Live preview Forms

Glow Switch

Switch that emits a colored glow when toggled on.

#transform #shadow #border

Live preview Forms

Glowing Knob Switch

Toggle where the knob itself glows when active.

#transform #shadow

Live preview Forms

Glow Ring Switch

Toggle with glowing ring around the track when active.

#transform #shadow

Live preview Forms

Gradient Switch

Switch with animated gradient track that activates when on.

#animation #gradient #transform

Live preview Forms

Grid Switch

Switches arranged in a 2-column grid for compact settings.

#transform #border

Live preview Forms

Grouped Switch

Switch group with section header for settings panel.

#hover #transform #border

Live preview Forms

Icon Switch

Switch with sun/moon icon that swaps based on toggle state.

#gradient #transform

Live preview Forms

Inverted Switch

Toggle with reversed color logic — track lightens when on.

#transform

Live preview Forms

iOS Switch

Classic iOS-style toggle with smooth knob slide and green accent.

#transform #shadow

Live preview Forms

Inline Label Switch

Switch with on/off text labels inside the track.

#transform

Live preview Forms

Large Switch

Oversized toggle for accessibility-friendly prominent control.

#transform #shadow #border

Live preview Forms

Light Switch

Light theme toggle with bright track and elevated knob.

#transform #shadow #border

Live preview Forms

Magnetic Switch

Knob snaps magnetically into place when toggled.

#transform #shadow

Live preview Forms

Material Rounded Switch

Material design full-rounded switch with prominent knob.

#transform #shadow

Live preview Forms

Minimal Switch

Bare minimum toggle with thin track and tiny knob.

#transform

Live preview Forms

Modern Switch

Sleek modern toggle with subtle elevation and accent.

#transform #shadow #border

Live preview Forms

Neon Switch

Cyberpunk neon switch with glowing accent and monospace label.

#transform #shadow #border

Live preview Forms

Pill Switch

Extra rounded pill-shaped toggle with smooth motion.

#gradient #transform

Live preview Forms

Power Switch

Toggle styled as a power button with glow when on.

#transform #shadow

Live preview Forms

Pulse Switch

Switch that pulses briefly when toggled on.

#animation #transform #border

Live preview Forms

Pulsing Knob Switch

Toggle knob pulses continuously when active.

#animation #transform #shadow

Live preview Forms

Retro Switch

Retro terminal switch with monospace and green CRT glow.

#transform #shadow #border

Live preview Forms

Retro Lever Switch

Vintage lever-style switch with metallic knob and base.

#gradient #transform #shadow

Live preview Forms

Ring Switch

Toggle that emits an expanding ring on activation.

#animation #transform #border

Live preview Forms

Ripple Switch

Switch with ripple emanating from knob on toggle.

#animation #transform

Live preview Forms

Rotate Switch

Knob rotates while sliding across the track.

#transform

Live preview Forms

Rounded Switch

Switch with rounded square knob and gradient track.

#gradient #transform

Live preview Forms

Row Switch

Horizontal switch row with leading icon and label.

#transform #border

Live preview Forms

Scale Switch

Switch knob scales up during transition for emphasis.

#transform

Live preview Forms

Shadow Lift Switch

Toggle knob lifts with shadow during transition.

#transform #shadow

Live preview Forms

Sharp Switch

Aggressive angular switch with cyberpunk feel.

#transform #shadow #border

Live preview Forms

Shine Switch

Switch with light sweep across track when toggled on.

#animation #gradient #transform

Live preview Forms

Slide Switch

Smooth sliding track with color gradient reveal.

#gradient #transform

Live preview Forms

Spotlight Switch

Toggle with radial spotlight glow around knob when active.

#gradient #transform

Live preview Forms

Spring Switch

Knob springs across track with bounce-back motion.

#animation #transform

Popular tags