Forms — 537 CSS effects

Midnight Background Input

Deep midnight blue gradient background.

Blur Background Input

Input that blurs the surrounding area on focus.

#border #filter

Bottom Only Border Input

Minimalist input with only a bottom border that thickens on focus.

Frosted Glass Input

Heavy frost effect with crystalline texture overlay.

#shadow #border #filter

Glassmorphism Input

Frosted glass input with backdrop blur and translucent border.

#shadow #border #filter

#animation #gradient #shadow

Stars Background Input

Cosmic starfield background with twinkling dots.

Dashed Border Input

Input with a dashed border that solidifies on focus.

Letter Spacing Floating Label

Label expands its letter spacing as it lifts up.

Pill Floating Label

Rounded pill input whose label slides into a small floating chip.

Rotate Floating Label

Label rotates 90 degrees then settles above the input.

Scale Down Floating Label

Label shrinks to the corner with a smooth scale-down motion.

Both Icons Input

Input with icons on both left and right sides.

Invalid Icon Input

Input with a red X icon that appears when invalid.

Retro Terminal OTP

Old terminal-style OTP with green phosphor text.

Checkmark Radio

Radio that displays an animated checkmark inside the circle when picked.

#gradient #transform #border

Flip Radio

Radio card flips in 3D when selected.

Glass Search Bar

Frosted glass search bar with translucent background.

Skeuomorphic 3D Input

Realistic 3D input with pressed-in appearance and bevels.

Glowing Background Input

Background glows brightly on focus, color seeping outward.

Gradient Background Input

Input with an animated gradient background that shifts on focus.

Mesh Background Input

Input with a vibrant mesh gradient background.

Neon Background Input

Dark input with neon glow background on focus.

Sunken Input

Deeply sunken input that appears pressed into surface.

3D Border Input

Skeuomorphic 3D raised border that depresses on focus.

Full Border Draw Input

Border draws itself around the input clockwise when focused.

#border

#animation #gradient #border

Fire Border Input

Animated fire-effect border using layered gradients.

Ice Border Input

Icy frosted border with crystalline shimmer.

Inset Border Input

Sunken inset border that pops out on focus.

Multi Color Border Input

Each side of the border has a different animated color.

#gradient #border

#animation #gradient #border

Rainbow Border Input

Border continuously cycles through rainbow hues.

Retro Terminal Border

Old terminal-style input with chunky inset border.

#transform #border #filter

Blur Floating Label

Label starts blurred then sharpens as it lifts to the top.

#animation #transform #border

Color Shift Floating Label

Label transitions through multiple hues when input is active.

Curve Floating Label

Label arcs upward in a curved path using transform-origin trick.

Cyan Accent Floating Label

Crisp cyan-themed floating label input.

Emerald Accent Floating Label

Calm emerald-themed floating label for signup forms.

Floating Label Fade

Label fades and floats up smoothly using opacity transitions.

#border

iOS Style Floating Label

Clean iOS-style input with rounded corners and subtle floating label.

Floating Label Slide Up

Classic floating label that slides up when the input is focused or filled.

Violet Accent Floating Label

Violet-themed floating label input with soft glow.

#animation #transform #shadow

Animating Icon Input

Input whose left icon bounces when input is focused.

Circle Icon Input

Input with circular icon container on the left.

#animation #transform #shadow

Color Changing Icon Input

Input whose icon cycles through colors on focus.

Email Icon Input

Email input with envelope icon that opens on focus.

Flip Icon Input

Input whose icon flips 180 degrees on focus.

Grow Icon Input

Input whose icon grows in size when focused.

Shrink Icon Input

Input whose icon shrinks when focused (inverse effect).

Tag Icon Input

Tag input with tag icon that flips in on focus.

#hover #transform #shadow

Search Input with Clear Button

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

Floating Label OTP

OTP boxes with floating placeholder text.

#gradient #transform #shadow

Credit Card Preview

Credit card visual preview that updates on input focus.

#animation #gradient #at-property

Property Focus Ring

Focusing the field animates a registered angle so the gradient ring circles it once.

#animation #transform #border

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#hover #transform #filter

Thumbs Radio

Thumbs up/down radio feedback with smooth transition.

3D Search Bar

Skeuomorphic 3D search bar with depth.

Icon Background Search

Search bar with icon in a colored background square.

Square Select Dropdown

Sharp-cornered square select with bold border.

Minimal Slider

Ultra-minimal slider with thin track and small thumb.

#animation #transform #shadow

Success State Input

Input showing success state with green border and checkmark icon.

Emoji Switch

Toggle with emoji that swaps between states.

#gradient #transform

Flip Switch

Switch knob flips 180 degrees when toggled.

#transform #3d

Segmented Switch

Segmented toggle group with sliding indicator between options.

#hover #shadow #border

Shadow Lift Switch

Toggle knob lifts with shadow during transition.

#transform #shadow

Spotlight Switch

Toggle with radial spotlight glow around knob when active.

#gradient #transform

Bordered Textarea

Textarea with a colored left accent border.

Glassmorphism Textarea

Frosted glass textarea with translucent background.

#shadow #border #filter

Brutalist Hard Edge Input

Brutalist design with hard borders, monospace and offset shadow.

Flat Material Input

Flat material design input with no shadows or bevels.

#border

Light Glassmorphism Input

Light frosted glass input with soft white glow on focus.

Neumorphic Soft Input

Soft neumorphic input with inset shadow on focus.

Valid Check Mark Input

Input that shows a green checkmark when valid.

Valid Icon Input

Input with a checkmark icon that appears when valid.

Success State Input

Input with full success state — green border, check, and label color.

Valid Underline Input

Bottom underline grows in green when valid.

#animation #gradient #shadow

Aurora Background Input

Northern lights aurora gradient background for the input.

Card Style Input

Elevated card-like input with shadow and rounded corners.

Cream Background Input

Warm cream-colored input with brown text.

Cyberpunk Background Input

Cyberpunk neon city background with grid floor.

Dark Themed Input

Sleek dark-themed input with subtle inner glow.

Embossed Input

Embossed stone-textured input with deep shadow.

Forest Background Input

Deep forest green gradient background.

Frost Background Input

Cold frost-tinted background with crystalline overlay.

Grid Background Input

Tech grid pattern background with glowing focus.