Live preview Forms
Trace Border Input
A glowing trace light travels around the input border on focus.
#transform CSS effects
5,986 free, pure-CSS effects match the "transform" tag. Each is copy-ready and needs no library or build step.
Effects tagged #transform
Live preview Forms
Animated Underline Border
Bottom underline grows from center outward on focus.
Live preview Forms
Animated Arrow Dropdown
Dropdown with arrow indicator that rotates when focused.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Floating Label Dropdown
Dropdown with floating label that animates when focused.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Multi-Select Chip Dropdown
Multi-select dropdown with chips for selected items.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
3D Flip Floating Label
Label performs a 3D flip rotation when the input receives focus.
Live preview Forms
Amber Accent Floating Label
Warm amber-accented floating label input for cozy forms.
Live preview Forms
Bordered Floating Label
Material outline where label sits on the border when active.
Live preview Forms
Bounce Floating Label
Label bounces up with an elastic spring when input is focused.
Live preview Forms
Corner Floating Label
Label slides to the top-left corner when input is focused.
Live preview Forms
Double Border Floating Label
Input with a double border that animates on focus, label lifts above.
Live preview Forms
Elastic Floating Label
Label elastically springs up with multiple bounces.
Live preview Forms
Live preview Forms
Gradient Text Floating Label
Label takes on an animated gradient color when input is focused.
Live preview Forms
Floating Label Field
The placeholder lifts into a small label above the field once anything is typed.
Live preview Forms
Material Design Input
Pure Material Design floating label with ripple-like underline.
Live preview Forms
Outline Draw Floating Label
Border outline draws itself around the input as label floats up.
Live preview Forms
Live preview Forms
Floating Label Scale
Label scales down and slides up with a smooth springy motion.
Live preview Forms
Shadow Floating Label
Label lifts with a long soft shadow trailing behind it.
Live preview Forms
Slide Left Floating Label
Label slides left then up when input receives focus.
Live preview Forms
Draw Underline Floating Label
Material-style input with an underline that draws itself in on focus.
Live preview Forms
Icon Background Input
Input with icon contained in a colored background square.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Emphasis Icon Input
Input with an emphasized icon that scales and glows strongly.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Date Input with Calendar Icon
Date input with animated calendar icon that bounces on focus.
Live preview Forms
Live preview Forms
Live preview Forms
Email Validation Input
Email input that turns green when valid, red when invalid.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Password Input with Eye Toggle
Password input with CSS-only eye icon that reveals via :focus.
Live preview Forms
Live preview Forms
Live preview Forms
Range Slider with Bubble
Range slider with a value bubble that follows the thumb.
Live preview Forms
Live preview Forms
Search Input with Animated Icon
Search input whose magnifier icon spins on focus.
Live preview Forms
Search Input with Loading
Search input that shows a loading spinner when typing.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Error State Input
Input with full error state — red border, X icon, and shake.
Live preview Forms
Live preview Forms
Invalid Message Input
Input that shows a red error message below when invalid.
Live preview Forms
Live preview Forms
Invalid Slide In Message
Error message slides in from the right when invalid.
Live preview Forms
Live preview Forms
Invalid Vibrate Input
Input vibrates briefly when content becomes invalid.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
OTP Code Boxes
Six single-character cells that light up and lift as each digit is entered.