Most Popular CSS Effects (Page 46)

Live preview Forms

Left Icon Input

Standard input with a left-aligned icon.

#transform #shadow #border

Live preview Forms

Location Icon Input

Address input with a location pin icon that bounces.

#animation #transform #shadow

Live preview Forms

Lock Icon Input

Password input with a lock icon that unlocks on focus.

#transform #shadow #border

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

Shrink Icon Input

Input whose icon shrinks when focused (inverse effect).

#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

Tag Icon Input

Tag input with tag icon that flips in on focus.

#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 Picker Input

Color picker with custom swatch preview.

#shadow #border

Live preview Forms

Rainbow Color Picker

Color picker displayed as a horizontal rainbow gradient strip.

#gradient #shadow #border

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

Currency Input

Currency input with dollar sign prefix.

#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 Upload Input

Custom styled file upload input with icon.

#hover #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

Number Input

Number input with custom styled steppers.

#hover #shadow #border

Live preview Forms

Number Stepper Input

Number input with custom increment/decrement buttons.

#hover #shadow #border

Live preview Forms

Password Input

Password input with lock icon and strength indicator border.

#transform #shadow #border

Live preview Forms

Password Strength Input

Password input with a visual strength meter bar below.

#gradient #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

Percentage Input

Percentage input with % suffix.

#shadow #border

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 Clear Button

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

#hover #transform #shadow

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

Tag Input Field

Input that displays tags as removable chips.

#hover #shadow #border

Live preview Forms

Telephone Input

Phone number input with country code prefix.

#shadow #border

Live preview Forms

Telephone Format Input

Phone input with formatted placeholder and country flag.

#shadow #border

Live preview Forms

Standard Text Input

Clean standard text input with smooth focus state.

#shadow #border

Live preview Forms

Time Input

Time input with clock icon and styled picker.

#transform #shadow #border

Live preview Forms

URL Input

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

#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

Invalid Background Input

Background subtly turns red-tinted when invalid.

#gradient #shadow #border

Live preview Forms

Invalid Border Bottom Input

Underline turns red when content is invalid.

#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 Glow Input

Input glows red continuously when invalid.

#animation #shadow #border

Live preview Forms

Invalid Red Glow Input

Input emits a soft red glow when content is invalid.

#shadow #border

Live preview Forms

Invalid Icon Input

Input with a red X icon that appears when invalid.

#transform #shadow #border

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 Red Border Input

Input turns red when invalid, with red glow.

#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

Bold OTP Input

Heavy bold OTP with strong contrast.

#border

Live preview Forms

Bordered OTP Input

OTP boxes with thick bold borders.

#transform #border

Live preview Forms

Glowing OTP Boxes

OTP boxes that glow when active or filled.

#shadow #border

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

Color Cycling OTP Input

OTP boxes that cycle through colors when focused.

#animation #shadow #border

Live preview Forms

Cyberpunk OTP Input

Cyberpunk-styled OTP with magenta-cyan accent glow.

#shadow #border

Live preview Forms

Dark OTP Input

Deep dark OTP boxes with subtle inner glow.

#shadow #border

Live preview Forms

Single Input with Dashes

Single OTP input with dashed separators.

#transform #border

Live preview Forms

Dots OTP Input

OTP input that displays dots instead of typed characters.

#shadow #border

Live preview Forms

Filled Indicator OTP

OTP boxes that fill with color when content is added.

#shadow #border

Live preview Forms

Glass OTP Input

Frosted glass OTP boxes with translucent borders.

#shadow #border #filter

Live preview Forms

Gradient Border OTP

OTP input wrapped with animated gradient borders.

#animation #gradient #border

Live preview Forms

Light OTP Input

Bright light-themed OTP boxes with clean borders.

#shadow #border

Live preview Forms

Line Connector OTP

OTP boxes connected by a horizontal line at the bottom.

#border

Live preview Forms

Minimal OTP Input

Ultra-minimal OTP with no borders, only underlines.

#border

Live preview Forms

Modern OTP Input

Sleek modern OTP with subtle shadows and gradient focus.

#shadow #border

Live preview Forms

Neon OTP Input

Cyberpunk-style neon OTP boxes with glow.

#shadow #border

Live preview Forms

Retro Terminal OTP

Old terminal-style OTP with green phosphor text.

#shadow #border

Live preview Forms

Rounded OTP Input

OTP input with fully rounded corners.

#transform #shadow #border

Live preview Forms

Segmented OTP Display

Segmented OTP input where boxes connect via shared borders.

#border

Live preview Forms

Sharp Corner OTP Input

OTP input with slightly rounded but bold corners.

#shadow #border

Live preview Forms

Square OTP Input

OTP input with sharp square corners.

#border

Browse by category

Popular tags