#transform CSS effects

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

Live preview Forms

Phone Icon Input

Phone input with phone icon that vibrates on focus.

#animation #transform #shadow

Live preview Forms

Pulse Icon Input

Input whose icon pulses softly when focused.

#animation #transform #shadow

Live preview Forms

Right Icon Input

Input with a right-aligned icon that highlights on focus.

#transform #shadow #border

Live preview Forms

Rotate Icon Input

Input whose icon rotates continuously when focused.

#animation #transform #shadow

Live preview Forms

Round Icon Input

Input with a fully rounded icon container that lights up.

#transform #shadow #border

Live preview Forms

Scale Icon Input

Input whose icon scales up smoothly on focus.

#transform #shadow #border

Live preview Forms

Search Icon Input

Input with a magnifier search icon that zooms on focus.

#transform #shadow #border

Live preview Forms

Slide Icon Input

Input whose icon slides left when focused.

#transform #shadow #border

Live preview Forms

Square Icon Input

Input with a square icon container on the right.

#transform #shadow #border

Live preview Forms

User Icon Input

Username input with a person icon that glows on focus.

#transform #shadow #border

Live preview Forms

Barcode Input

Input with barcode pattern background.

#gradient #transform #shadow

Live preview Forms

Birthday Input

Birthday input with cake icon.

#transform #shadow #border

Live preview Forms

Chip Style Input

Input displayed as a removable chip.

#hover #transform #shadow

Live preview Forms

Color Swatch Picker

Color picker displayed as a row of preset swatches.

#transform #shadow #border

Live preview Forms

Coupon Code Input

Coupon code input with apply button.

#hover #transform #shadow

Live preview Forms

Credit Card Input

Credit card number input with card type icon.

#transform #shadow #border

Live preview Forms

CVC Input

CVC security code input with lock icon.

#hover #transform #shadow

Live preview Forms

Date Picker Input

Date input with calendar icon and styled date picker.

#transform #shadow #border

Live preview Forms

Date Input with Calendar Icon

Date input with animated calendar icon that bounces on focus.

#animation #transform #shadow

Live preview Forms

Datetime Local Input

Combined date and time picker input.

#transform #shadow #border

Live preview Forms

Email Input

Email input with @ symbol prefix and validation styling.

#transform #shadow #border

Live preview Forms

Email Validation Input

Email input that turns green when valid, red when invalid.

#transform #shadow #border

Live preview Forms

File Drop Zone Input

Drag-and-drop file upload zone with dashed border.

#hover #transform #border

Live preview Forms

Month Input

Month picker input with year/month selection.

#transform #shadow #border

Live preview Forms

Password Input

Password input with lock icon and strength indicator border.

#transform #shadow #border

Live preview Forms

Password Input with Eye Toggle

Password input with CSS-only eye icon that reveals via :focus.

#hover #transform #shadow

Live preview Forms

QR Code Input

Input with QR code scan icon and dotted border.

#hover #transform #shadow

Live preview Forms

Range Slider Input

Range slider with custom styled thumb and track.

#hover #gradient #transform

Live preview Forms

Range Slider with Bubble

Range slider with a value bubble that follows the thumb.

#transform #shadow #border

Live preview Forms

Search Input

Classic search bar with magnifier icon.

#transform #shadow #border

Live preview Forms

Search Input with Animated Icon

Search input whose magnifier icon spins on focus.

#transform #shadow #border

Live preview Forms

Search Input with Loading

Search input that shows a loading spinner when typing.

#animation #transform #shadow

Live preview Forms

Time Input

Time input with clock icon and styled picker.

#transform #shadow #border

Live preview Forms

URL Preview Input

URL input with a small favicon-style preview bubble.

#transform #shadow #border

Live preview Forms

Week Input

Week picker input with calendar icon.

#transform #shadow #border

Live preview Forms

ZIP Code Input

ZIP/Postal code input with location pin icon.

#transform #shadow #border

Live preview Forms

Animated Cross Mark Input

Cross X draws itself when input is invalid.

#animation #transform #shadow

Live preview Forms

Error State Input

Input with full error state — red border, X icon, and shake.

#animation #transform #shadow

Live preview Forms

Invalid Icon Shake Input

Red icon shakes back and forth when invalid.

#animation #transform #shadow

Live preview Forms

Invalid Message Input

Input that shows a red error message below when invalid.

#transform #shadow #border

Live preview Forms

Invalid Shake Input

Input shakes horizontally when invalid.

#animation #transform #shadow

Live preview Forms

Invalid Slide In Message

Error message slides in from the right when invalid.

#transform #shadow #border

Live preview Forms

Invalid Underline Input

Bottom underline grows in red when invalid.

#transform #border

Live preview Forms

Invalid Vibrate Input

Input vibrates briefly when content becomes invalid.

#animation #transform #shadow

Live preview Forms

3D OTP Input

OTP boxes with 3D shadow that depress on focus.

#transform #shadow #border

Live preview Forms

4-Box OTP Input

Four-box OTP input with rounded corners.

#transform #shadow #border

Live preview Forms

6-Box OTP Input

Six segmented OTP input boxes with active state highlight.

#transform #shadow #border

Live preview Forms

Active Indicator OTP

OTP boxes with active indicator bar at the bottom.

#transform #border

Live preview Forms

Bordered OTP Input

OTP boxes with thick bold borders.

#transform #border

Live preview Forms

OTP Code Boxes

Six single-character cells that light up and lift as each digit is entered.

#border #shadow #transform

Live preview Forms

Card Style OTP

OTP boxes that look like raised cards with shadow.

#transform #shadow #border

Live preview Forms

Circle OTP Input

OTP input displayed as circular dots.

#transform #shadow #border

Live preview Forms

Single Input with Dashes

Single OTP input with dashed separators.

#transform #border

Live preview Forms

Rounded OTP Input

OTP input with fully rounded corners.

#transform #shadow #border

Live preview Forms

Flip Credit Card Input

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

#gradient #transform #shadow

Live preview Forms

Cardholder Name Input

Cardholder name input with uppercase auto-format styling.

#transform #shadow #border

Live preview Forms

Coupon Code Input

Coupon code input with apply button and dashed border.

#hover #transform #shadow

Live preview Forms

Currency Picker Input

Currency selector dropdown with flag and code display.

#transform #shadow #border

Live preview Forms

Card CVC Input

Card CVC code input with masked text and lock icon.

#transform #shadow #border

Live preview Forms

Discount Code Input

Discount code input with verified checkmark when filled.

#transform #shadow #border

Live preview Forms

Gift Card Input

Gift card code input with gift icon and reveal toggle.

#hover #transform #shadow

Live preview Forms

Split Payment Input

Split payment input showing two amounts and divider.

#transform #shadow #border

Live preview Forms

Order Total Display

Order total display with large amount and discount applied.

#gradient #transform #shadow

Live preview Forms

3D Radio

Radio with 3D depth and shadow effect on selection.

#transform #shadow

Live preview Forms

Arrow Radio

Radio with arrow indicator that appears next to selected option.

#hover #transform

Live preview Forms

Bar Indicator Radio

Radio with side bar indicator that grows on selection.

#transform #border

Live preview Forms

Bold Radio

Radio with thick bold border and chunky indicator.

#transform #border

Live preview Forms

Border Draw Radio

Radio card with animated border that draws in when selected.

#gradient #transform #border

Live preview Forms

Card Radio Group

Vertical radio cards that lift and glow when selected.

#gradient #transform #shadow

Live preview Forms

Check Icon Radio

Radio with checkmark icon that appears when selected.

#transform #border

Live preview Forms

Circle Fill Radio

Classic radio with a centered dot that fills smoothly when selected.

#hover #transform #border

Live preview Forms

Color Cycling Radio

Selected radio option cycles through rainbow colors.

#animation #gradient #transform

Live preview Forms

Confetti Radio

Radio option with confetti burst on selection for celebration.

#animation #gradient #transform

Live preview Forms

Dark Radio

Dark theme radio with subtle elevated selection state.

#transform #border

Live preview Forms

Dot Indicator Radio

Minimal radio with leading dot indicator that lights up.

#hover #transform #shadow

Live preview Forms

Emoji Radio

Radio with emoji reaction faces for satisfaction feedback.

#hover #transform #border

Live preview Forms

Expanding Radio

Radio option expands in height when selected to show details.

#transform #border

Live preview Forms

Fade Radio

Radio with smooth opacity fade on selection state.

#hover #transform #border

Live preview Forms

Fill Width Radio

Radio card with fill bar that animates across on selection.

#gradient #transform #border

Live preview Forms

Flat Radio

Minimal flat radio with subtle accent dot when selected.

#hover #transform #border

Live preview Forms

Glass Radio

Frosted glassmorphism radio cards with backdrop blur.

#gradient #transform #border

Live preview Forms

Glow Radio

Selected radio option emits a soft glow around its label.

#transform #shadow #border

Live preview Forms

Grid Radio

Radio options arranged in a 3-column grid for compact selection.

#hover #transform #border

Live preview Forms

Grouped Radio

Radio group with section header and grouped options.

#transform #border

Live preview Forms

Heart Radio

Radio styled as heart icon with bounce animation.

#hover #animation #transform

Live preview Forms

Icon Radio

Radio with leading icon and label that highlights when selected.

#transform #border

Live preview Forms

Light Radio

Light theme radio with subtle elevation and clean look.

#transform #border

Live preview Forms

Magnetic Radio

Radio options that subtly attract when hovered and snap on select.

#hover #transform #shadow

Live preview Forms

Minimal Radio

Bare minimum radio with thin outline and small accent dot.

#transform #border

Live preview Forms

Modern Radio

Sleek modern radio with accent color and clean typography.

#transform #shadow #border

Live preview Forms

Multi-line Radio

Radio option with primary title and secondary subtitle.

#transform #border

Live preview Forms

Neon Radio

Cyberpunk neon glow radio with bright accent on selection.

#transform #shadow #border

Live preview Forms

Power Symbol Radio

Radio styled as power button symbols for on/off states.

#transform #shadow

Live preview Forms

Pulse Radio

Radio option pulses with a ring when selected.

#animation #transform #border

Live preview Forms

Retro Radio

Retro terminal style radio with monospace font and green accent.

#transform #shadow #border

Live preview Forms

Ring Expansion Radio

Radio with expanding ring on selection for emphasis.

#animation #transform #border

Popular tags