Forms — 537 CSS effects

Credit Card Icon Input

Card number input with a credit card icon that tilts.

Emphasis Icon Input

Input with an emphasized icon that scales and glows strongly.

Eye Icon Input

Password input with eye icon that opens on focus.

Fade Icon Input

Input whose icon fades in/out smoothly on focus.

Left Icon Input

Standard input with a left-aligned icon.

Location Icon Input

Address input with a location pin icon that bounces.

Lock Icon Input

Password input with a lock icon that unlocks on focus.

Phone Icon Input

Phone input with phone icon that vibrates on focus.

Pulse Icon Input

Input whose icon pulses softly when focused.

Right Icon Input

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

Rotate Icon Input

Input whose icon rotates continuously when focused.

Round Icon Input

Input with a fully rounded icon container that lights up.

Scale Icon Input

Input whose icon scales up smoothly on focus.

Search Icon Input

Input with a magnifier search icon that zooms on focus.

Slide Icon Input

Input whose icon slides left when focused.

Square Icon Input

Input with a square icon container on the right.

User Icon Input

Username input with a person icon that glows on focus.

#gradient #transform #shadow

Barcode Input

Input with barcode pattern background.

Birthday Input

Birthday input with cake icon.

Chip Style Input

Input displayed as a removable chip.

Color Picker Input

Color picker with custom swatch preview.

#gradient #shadow #border

Rainbow Color Picker

Color picker displayed as a horizontal rainbow gradient strip.

Color Swatch Picker

Color picker displayed as a row of preset swatches.

Coupon Code Input

Coupon code input with apply button.

Credit Card Input

Credit card number input with card type icon.

Currency Input

Currency input with dollar sign prefix.

CVC Input

CVC security code input with lock icon.

Date Picker Input

Date input with calendar icon and styled date picker.

Date Input with Calendar Icon

Date input with animated calendar icon that bounces on focus.

Datetime Local Input

Combined date and time picker input.

Email Input

Email input with @ symbol prefix and validation styling.

Email Validation Input

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

File Upload Input

Custom styled file upload input with icon.

#hover #border

#hover #transform #border

File Drop Zone Input

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

Month Input

Month picker input with year/month selection.

Number Input

Number input with custom styled steppers.

#hover #shadow #border

Number Stepper Input

Number input with custom increment/decrement buttons.

#hover #shadow #border

Password Input

Password input with lock icon and strength indicator border.

Password Strength Input

Password input with a visual strength meter bar below.

#gradient #border

Password Input with Eye Toggle

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

Percentage Input

Percentage input with % suffix.

QR Code Input

Input with QR code scan icon and dotted border.

#hover #gradient #transform

Range Slider Input

Range slider with custom styled thumb and track.

Range Slider with Bubble

Range slider with a value bubble that follows the thumb.

Search Input

Classic search bar with magnifier icon.

Search Input with Animated Icon

Search input whose magnifier icon spins on focus.

Search Input with Loading

Search input that shows a loading spinner when typing.

Tag Input Field

Input that displays tags as removable chips.

#hover #shadow #border

Telephone Input

Phone number input with country code prefix.

Telephone Format Input

Phone input with formatted placeholder and country flag.

Standard Text Input

Clean standard text input with smooth focus state.

Time Input

Time input with clock icon and styled picker.

URL Input

URL input with https:// prefix and link icon.

URL Preview Input

URL input with a small favicon-style preview bubble.

Week Input

Week picker input with calendar icon.

ZIP Code Input

ZIP/Postal code input with location pin icon.

#gradient #shadow #border

Invalid Background Input

Background subtly turns red-tinted when invalid.

Invalid Border Bottom Input

Underline turns red when content is invalid.

Animated Cross Mark Input

Cross X draws itself when input is invalid.

Error State Input

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

#animation #shadow #border

Invalid Glow Input

Input glows red continuously when invalid.

Invalid Red Glow Input

Input emits a soft red glow when content is invalid.

Invalid Icon Shake Input

Red icon shakes back and forth when invalid.

Invalid Message Input

Input that shows a red error message below when invalid.

Invalid Red Border Input

Input turns red when invalid, with red glow.

Invalid Shake Input

Input shakes horizontally when invalid.

Invalid Slide In Message

Error message slides in from the right when invalid.

Invalid Underline Input

Bottom underline grows in red when invalid.

Invalid Vibrate Input

Input vibrates briefly when content becomes invalid.

OKLCH Field States

Rest, hover and focus shades of one field are all mixed from a single OKLCH accent.

#hover #border #shadow

3D OTP Input

OTP boxes with 3D shadow that depress on focus.

4-Box OTP Input

Four-box OTP input with rounded corners.

6-Box OTP Input

Six segmented OTP input boxes with active state highlight.

Active Indicator OTP

OTP boxes with active indicator bar at the bottom.

Bold OTP Input

Heavy bold OTP with strong contrast.

Bordered OTP Input

OTP boxes with thick bold borders.

Glowing OTP Boxes

OTP boxes that glow when active or filled.

#border #shadow #transform

OTP Code Boxes

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

Card Style OTP

OTP boxes that look like raised cards with shadow.

Circle OTP Input

OTP input displayed as circular dots.

#animation #shadow #border

Color Cycling OTP Input

OTP boxes that cycle through colors when focused.

Cyberpunk OTP Input

Cyberpunk-styled OTP with magenta-cyan accent glow.

Dark OTP Input

Deep dark OTP boxes with subtle inner glow.

Single Input with Dashes

Single OTP input with dashed separators.

Dots OTP Input

OTP input that displays dots instead of typed characters.

Filled Indicator OTP

OTP boxes that fill with color when content is added.

Glass OTP Input

Frosted glass OTP boxes with translucent borders.

#shadow #border #filter

#animation #gradient #border

Gradient Border OTP

OTP input wrapped with animated gradient borders.

Light OTP Input

Bright light-themed OTP boxes with clean borders.

Line Connector OTP

OTP boxes connected by a horizontal line at the bottom.

Minimal OTP Input

Ultra-minimal OTP with no borders, only underlines.

Modern OTP Input

Sleek modern OTP with subtle shadows and gradient focus.

Neon OTP Input

Cyberpunk-style neon OTP boxes with glow.

Rounded OTP Input

OTP input with fully rounded corners.

Segmented OTP Display

Segmented OTP input where boxes connect via shared borders.

Sharp Corner OTP Input

OTP input with slightly rounded but bold corners.