#gradient CSS effects

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

Live preview Checkboxes

Leather Texture Toggle

A brown leather pebbled texture when checked.

#gradient #transform #shadow

Live preview Checkboxes

Marble Texture Toggle

A white marble veined texture when checked.

#gradient #transform #shadow

Live preview Checkboxes

Metal Texture Toggle

A brushed metal texture with silver shine when checked.

#gradient #transform #shadow

Live preview Checkboxes

Paper Texture Toggle

A cream paper texture with subtle grain when checked.

#gradient #transform #shadow

Live preview Checkboxes

Sand Texture Toggle

A sandy tan texture with grain when checked.

#gradient #transform #shadow

Live preview Checkboxes

Stone Texture Toggle

A stone-textured box that solidifies gray when checked.

#gradient #transform #shadow

Live preview Checkboxes

Water Texture Toggle

A rippling water texture in blue when checked.

#gradient #transform #shadow

Live preview Checkboxes

Wood Texture Toggle

A wood-textured box that warms to brown when checked.

#gradient #transform #shadow

Live preview Checkboxes

Stitched Thread Checkbox

A dashed thread sews itself across the patch from one edge to the other.

#gradient #transform #stitch

Live preview Checkboxes

Topaz Golden Gem

A golden topaz gem shimmers with warm light when checked.

#gradient #shadow #border

Live preview Checkboxes

Turquoise Stone Toggle

A turquoise stone with webbed matrix lights up when checked.

#gradient #shadow #border

Live preview Checkboxes

Uranus Ice Giant

A pale cyan ice giant tilted sideways when checked.

#gradient #transform #shadow

Live preview Checkboxes

Venus Golden Clouds

A warm yellow-orange Venus glows with thick clouds when checked.

#gradient #transform #shadow

Live preview Checkboxes

Zipper Checkbox

A zipper pull travels along the track and closes the teeth behind it.

#gradient #clip-path #transform

Live preview Forms

Aurora Background Input

Northern lights aurora gradient background for the input.

#animation #gradient #shadow

Live preview Forms

Cyberpunk Background Input

Cyberpunk neon city background with grid floor.

#gradient #shadow #border

Live preview Forms

Forest Background Input

Deep forest green gradient background.

#gradient #shadow #border

Live preview Forms

Frost Background Input

Cold frost-tinted background with crystalline overlay.

#gradient #shadow #border

Live preview Forms

Grid Background Input

Tech grid pattern background with glowing focus.

#gradient #shadow #border

Live preview Forms

Lava Background Input

Hot lava gradient with crackling orange glow.

#animation #gradient #shadow

Live preview Forms

Mesh Gradient Background

Animated multi-color mesh gradient that drifts.

#animation #gradient #shadow

Live preview Forms

Ocean Background Input

Calm ocean blue gradient background.

#gradient #shadow #border

Live preview Forms

Paper Texture Input

Cream paper-textured input with subtle lines.

#gradient #shadow #border

Live preview Forms

Pattern Background Input

Decorative pattern background using CSS gradients.

#gradient #shadow #border

Live preview Forms

Sunset Background Input

Warm sunset gradient orange to pink background.

#gradient #shadow #border

Live preview Forms

Vaporwave Background Input

Vaporwave pink-cyan gradient aesthetic.

#gradient #shadow #border

Live preview Forms

Gradient Border Input

Input wrapped with an animated gradient border using padding box trick.

#animation #gradient #border

Live preview Forms

Rotating Gradient Border

Conic gradient border rotates around the input continuously.

#animation #gradient #transform

Live preview Forms

Shimmer Border Input

Border has a traveling shimmer light effect on focus.

#animation #gradient #transform

Live preview Forms

Trace Border Input

A glowing trace light travels around the input border on focus.

#animation #gradient #transform

Live preview Forms

Animated Underline Border

Bottom underline grows from center outward on focus.

#gradient #transform #border

Live preview Forms

Gradient Text Floating Label

Label takes on an animated gradient color when input is focused.

#animation #gradient #transform

Live preview Forms

Material Design Input

Pure Material Design floating label with ripple-like underline.

#gradient #transform #border

Live preview Forms

Barcode Input

Input with barcode pattern background.

#gradient #transform #shadow

Live preview Forms

Rainbow Color Picker

Color picker displayed as a horizontal rainbow gradient strip.

#gradient #shadow #border

Live preview Forms

Password Strength Input

Password input with a visual strength meter bar below.

#gradient #border

Live preview Forms

Range Slider Input

Range slider with custom styled thumb and track.

#hover #gradient #transform

Live preview Forms

Invalid Background Input

Background subtly turns red-tinted when invalid.

#gradient #shadow #border

Live preview Forms

Gradient Border OTP

OTP input wrapped with animated gradient borders.

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

Loyalty Points Input

Loyalty points input with balance display and redeem button.

#hover #gradient #shadow

Live preview Forms

Order Total Display

Order total display with large amount and discount applied.

#gradient #transform #shadow

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

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

Fill Width Radio

Radio card with fill bar that animates across on selection.

#gradient #transform #border

Live preview Forms

Glass Radio

Frosted glassmorphism radio cards with backdrop blur.

#gradient #transform #border

Live preview Forms

Gradient Radio

Radio with gradient fill background when selected.

#gradient #shadow #border

Live preview Forms

Rounded Square Radio

Radio with rounded square indicator and gradient fill.

#gradient #transform #border

Live preview Forms

Scale Radio

Selected radio option scales up its label text slightly.

#hover #gradient #transform

Live preview Forms

Slide Indicator Radio

Radio with sliding indicator that moves between options.

#gradient #transform #border

Live preview Forms

Spotlight Radio

Radio with radial spotlight glow on selected option.

#gradient #transform #border

Live preview Forms

Custom Range Track

A slider with a gradient track and a thumb that grows a soft halo on focus.

#hover #gradient #shadow

Live preview Forms

Gradient Border Search

Search bar with animated gradient border.

#animation #gradient #transform

Live preview Forms

Gradient Border Select

Select wrapped with an animated gradient border.

#animation #gradient #transform

Live preview Forms

3D Slider

Skeuomorphic 3D slider with raised thumb.

#gradient #shadow #border

Live preview Forms

Color Hue Slider

Range slider with a rainbow gradient track for hue selection.

#gradient #shadow #border

Live preview Forms

Cyberpunk Slider

Cyberpunk neon slider with magenta fill and cyan thumb.

#gradient #shadow #border

Live preview Forms

Fill Track Slider

Slider with a colored fill that follows the thumb.

#gradient #shadow #border

Live preview Forms

Gradient Thumb Slider

Slider with a colorful gradient thumb.

#animation #gradient #transform

Live preview Forms

Gradient Track Slider

Range slider with a gradient track background.

#gradient #shadow #border

Live preview Forms

Rotate Slider

Slider whose thumb rotates while being dragged.

#animation #gradient #transform

Live preview Forms

Rounded Slider

Range slider with rounded track and large rounded thumb.

#hover #gradient #transform

Live preview Forms

3D Press Switch

Switch knob depresses 3D-style when toggled.

#gradient #transform #shadow

Live preview Forms

Aurora Switch

Toggle with aurora-like gradient when active.

#animation #gradient #transform

Live preview Forms

Color Cycling Switch

Switch track cycles through rainbow colors when active.

#animation #gradient #transform

Live preview Forms

Fill Track Switch

Track fills with gradient from left when toggled on.

#gradient #transform

Live preview Forms

Glass Switch

Frosted glassmorphism switch with backdrop blur effect.

#gradient #transform #border

Live preview Forms

Gradient Switch

Switch with animated gradient track that activates when on.

#animation #gradient #transform

Live preview Forms

Icon Switch

Switch with sun/moon icon that swaps based on toggle state.

#gradient #transform

Live preview Forms

Pill Switch

Extra rounded pill-shaped toggle with smooth motion.

#gradient #transform

Live preview Forms

Retro Lever Switch

Vintage lever-style switch with metallic knob and base.

#gradient #transform #shadow

Live preview Forms

Rounded Switch

Switch with rounded square knob and gradient track.

#gradient #transform

Live preview Forms

Shine Switch

Switch with light sweep across track when toggled on.

#animation #gradient #transform

Live preview Forms

Slide Switch

Smooth sliding track with color gradient reveal.

#gradient #transform

Live preview Forms

Resizable Textarea

Textarea with visible resize handle styling.

#gradient #shadow #border

Live preview Forms

3D Pressable Input

3D input that appears to depress when focused.

#gradient #transform #shadow

Live preview Forms

Aurora Background Input

Input with shifting aurora gradient background.

#animation #gradient #border

Live preview Forms

Dark Theme Input

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

#gradient #shadow #border

Live preview Forms

Dark Glassmorphism Input

Frosted dark glass input with backdrop blur and gradient sheen.

#gradient #shadow #border

Live preview Forms

Animated Gradient Border Input

Input with animated rotating gradient border around it.

#animation #gradient #border

Live preview Forms

Paper Texture Input

Vintage paper styled input with warm tones and serif font.

#gradient #shadow #border

Live preview Forms

Vaporwave Gradient Input

Vaporwave aesthetic with pink-purple gradient and retro grid.

#gradient #shadow #border

Live preview Forms

Underline Focus Field

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

#gradient #transform #border

Live preview Forms

Valid Background Input

Background subtly turns green-tinted when valid.

#gradient #shadow #border

Live preview Hover

Ambient Glow Fill

Ambient glow fills the surface on hover.

#hover #gradient

Live preview Hover

Aperture Iris Open

Camera aperture opens to reveal on hover.

#hover #gradient

Live preview Hover

Backlit Silhouette

Strong backlight silhouettes the element on hover.

#hover #gradient #filter

Live preview Hover

Beam Sweep

Vertical light beam sweeps across on hover.

#hover #gradient #transform

Live preview Hover

BG Aurora Drift

Aurora-like waves drift on hover.

#hover #animation #gradient

Live preview Hover

BG Blur Overlay

Blurred overlay covers background on hover.

#hover #gradient #filter

Live preview Hover

BG Circuit Trace

Circuit lines trace on background on hover.

#hover #animation #gradient

Popular tags