Forms — 537 CSS effects

Pill Switch

Extra rounded pill-shaped toggle with smooth motion.

#gradient #transform

Power Switch

Toggle styled as a power button with glow when on.

#transform #shadow

#animation #transform #border

Pulse Switch

Switch that pulses briefly when toggled on.

Pulsing Knob Switch

Toggle knob pulses continuously when active.

Retro Switch

Retro terminal switch with monospace and green CRT glow.

#gradient #transform #shadow

Retro Lever Switch

Vintage lever-style switch with metallic knob and base.

#animation #transform #border

Ring Switch

Toggle that emits an expanding ring on activation.

Ripple Switch

Switch with ripple emanating from knob on toggle.

#animation #transform

Rotate Switch

Knob rotates while sliding across the track.

Rounded Switch

Switch with rounded square knob and gradient track.

#gradient #transform

Row Switch

Horizontal switch row with leading icon and label.

#transform #border

Scale Switch

Switch knob scales up during transition for emphasis.

Sharp Switch

Aggressive angular switch with cyberpunk feel.

#animation #gradient #transform

Shine Switch

Switch with light sweep across track when toggled on.

Slide Switch

Smooth sliding track with color gradient reveal.

#gradient #transform

Spring Switch

Knob springs across track with bounce-back motion.

#animation #transform

Square Switch

Square track switch with sharp corners and minimal aesthetic.

#transform #border

#hover #transform #border

Stacked Switches

Vertically stacked switches for a settings list.

Status Switch

Toggle with color-coded status indicator dot.

#transform #shadow

Text Reveal Switch

Switch with YES/NO text that swaps when toggled.

Tiny Switch

Compact micro toggle for inline use in dense UIs.

Vertical Switch

Vertical orientation switch with knob sliding up/down.

Framed Textarea

A resizable textarea whose frame and counter recolour together while focused.

#border #shadow #focus

Textarea with Char Counter

Textarea with a live character counter display.

Dark Themed Textarea

Deep dark textarea with subtle inner shadow.

Floating Label Textarea

Textarea with a floating label that animates on focus.

Glow Textarea

Textarea with a soft glow effect on focus.

Minimal Textarea

Clean minimal textarea with thin border.

Resizable Textarea

Textarea with visible resize handle styling.

Rounded Textarea

Fully rounded textarea with smooth corners.

Underline Textarea

Minimalist textarea with just a bottom underline.

#border

#gradient #transform #shadow

3D Pressable Input

3D input that appears to depress when focused.

#animation #gradient #border

Aurora Background Input

Input with shifting aurora gradient background.

Cyberpunk Neon Input

Cyberpunk styled input with neon pink-cyan glow and corner cuts.

Dark Theme Input

Dark themed input with gradient background and indigo glow on focus.

Elevated Card Input

Input wrapped in an elevated card that lifts higher on focus.

Dark Glassmorphism Input

Frosted dark glass input with backdrop blur and gradient sheen.

#animation #gradient #border

Animated Gradient Border Input

Input with animated rotating gradient border around it.

Light Theme Input

Clean light theme input with subtle shadow and rounded corners.

Minimal Underline Input

Ultra minimal input with only a bottom underline that grows on focus.

#transform #border

Monochrome Theme Input

Pure monochrome grayscale input with subtle elevation.

Neon Glow Input

Input with bright neon cyan glow effect on focus.

Paper Texture Input

Vintage paper styled input with warm tones and serif font.

Pastel Soft Input

Soft pastel themed input with candy colors and rounded corners.

Retro Terminal Input

Old terminal CRT style with green phosphor text.

Vaporwave Gradient Input

Vaporwave aesthetic with pink-purple gradient and retro grid.

#gradient #transform #border

Underline Focus Field

A minimal field where only the baseline exists, and it fills in from the centre.

Valid Background Input

Background subtly turns green-tinted when valid.

Valid Border Bottom Input

Underline turns green when content is valid.

#border

Valid Bounce Input

Input bounces once when content becomes valid.

Animated Check Mark Input

Checkmark draws itself in SVG-style when valid.

Valid Fade In Message

Success message fades in below input when valid.

Valid Green Glow Input

Input emits a soft green glow when content is valid.

Valid Green Border Input

Input that turns entirely green when valid.

Valid Icon Pop Input

Green icon pops in with elastic bounce when valid.

Valid Message Input

Input that shows a green success message below when valid.