LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

#gradient CSS efektleri

"gradient" etiketiyle eşleşen 5.189 ücretsiz saf CSS efekti. Hepsi kopyala-yapıştır hazır; kullanmak için kütüphane veya derleme adımı gerekmez.

Canlı incele Onay Kutuları

Saturn Ringed Planet

A ringed Saturn tilted at an angle shows when checked.

#gradient #transform #border

Canlı incele Onay Kutuları

Wax Seal Checkbox

A wax seal drops onto the paper, spreads outward and keeps its pressed rim.

#gradient #shadow #transform

Canlı incele Onay Kutuları

Shooting Star Trail

A star shoots across the box leaving a glowing trail when checked.

#animation #gradient #border

Canlı incele Onay Kutuları

Slide Fill Checkbox

Colour wipes in from the left edge of the box and the tick fades in behind it.

#gradient #transform #border

Canlı incele Onay Kutuları

Spring Coil Checkbox

A coiled spring compresses under load and the plate settles down onto it.

#gradient #transform #border

Canlı incele Onay Kutuları

Stardust Trail Toggle

A trail of golden stardust sparkles around the box when checked.

#animation #gradient #transform

Canlı incele Onay Kutuları

Fabric Texture Toggle

A woven fabric texture in red when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Leather Texture Toggle

A brown leather pebbled texture when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Marble Texture Toggle

A white marble veined texture when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Metal Texture Toggle

A brushed metal texture with silver shine when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Paper Texture Toggle

A cream paper texture with subtle grain when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Sand Texture Toggle

A sandy tan texture with grain when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Stone Texture Toggle

A stone-textured box that solidifies gray when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Water Texture Toggle

A rippling water texture in blue when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Wood Texture Toggle

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

#gradient #transform #shadow

Canlı incele Onay Kutuları

Stitched Thread Checkbox

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

#gradient #transform #stitch

Canlı incele Onay Kutuları

Topaz Golden Gem

A golden topaz gem shimmers with warm light when checked.

#gradient #shadow #border

Canlı incele Onay Kutuları

Turquoise Stone Toggle

A turquoise stone with webbed matrix lights up when checked.

#gradient #shadow #border

Canlı incele Onay Kutuları

Uranus Ice Giant

A pale cyan ice giant tilted sideways when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Venus Golden Clouds

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

#gradient #transform #shadow

Canlı incele Onay Kutuları

Zipper Checkbox

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

#gradient #clip-path #transform

Canlı incele Formlar

Aurora Background Input

Northern lights aurora gradient background for the input.

#animation #gradient #shadow

Canlı incele Formlar

Cyberpunk Background Input

Cyberpunk neon city background with grid floor.

#gradient #shadow #border

Canlı incele Formlar

Forest Background Input

Deep forest green gradient background.

#gradient #shadow #border

Canlı incele Formlar

Frost Background Input

Cold frost-tinted background with crystalline overlay.

#gradient #shadow #border

Canlı incele Formlar

Grid Background Input

Tech grid pattern background with glowing focus.

#gradient #shadow #border

Canlı incele Formlar

Lava Background Input

Hot lava gradient with crackling orange glow.

#animation #gradient #shadow

Canlı incele Formlar

Mesh Gradient Background

Animated multi-color mesh gradient that drifts.

#animation #gradient #shadow

Canlı incele Formlar

Ocean Background Input

Calm ocean blue gradient background.

#gradient #shadow #border

Canlı incele Formlar

Paper Texture Input

Cream paper-textured input with subtle lines.

#gradient #shadow #border

Canlı incele Formlar

Pattern Background Input

Decorative pattern background using CSS gradients.

#gradient #shadow #border

Canlı incele Formlar

Sunset Background Input

Warm sunset gradient orange to pink background.

#gradient #shadow #border

Canlı incele Formlar

Vaporwave Background Input

Vaporwave pink-cyan gradient aesthetic.

#gradient #shadow #border

Canlı incele Formlar

Gradient Border Input

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

#animation #gradient #border

Canlı incele Formlar

Rotating Gradient Border

Conic gradient border rotates around the input continuously.

#animation #gradient #transform

Canlı incele Formlar

Shimmer Border Input

Border has a traveling shimmer light effect on focus.

#animation #gradient #transform

Canlı incele Formlar

Trace Border Input

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

#animation #gradient #transform

Canlı incele Formlar

Animated Underline Border

Bottom underline grows from center outward on focus.

#gradient #transform #border

Canlı incele Formlar

Gradient Text Floating Label

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

#animation #gradient #transform

Canlı incele Formlar

Material Design Input

Pure Material Design floating label with ripple-like underline.

#gradient #transform #border

Canlı incele Formlar

Barcode Input

Input with barcode pattern background.

#gradient #transform #shadow

Canlı incele Formlar

Rainbow Color Picker

Color picker displayed as a horizontal rainbow gradient strip.

#gradient #shadow #border

Canlı incele Formlar

Password Strength Input

Password input with a visual strength meter bar below.

#gradient #border

Canlı incele Formlar

Range Slider Input

Range slider with custom styled thumb and track.

#hover #gradient #transform

Canlı incele Formlar

Invalid Background Input

Background subtly turns red-tinted when invalid.

#gradient #shadow #border

Canlı incele Formlar

Gradient Border OTP

OTP input wrapped with animated gradient borders.

#animation #gradient #border

Canlı incele Formlar

Flip Credit Card Input

Credit card input that flips to show CVC field on focus.

#gradient #transform #shadow

Canlı incele Formlar

Loyalty Points Input

Loyalty points input with balance display and redeem button.

#hover #gradient #shadow

Canlı incele Formlar

Order Total Display

Order total display with large amount and discount applied.

#gradient #transform #shadow

Canlı incele Formlar

Card Radio Group

Vertical radio cards that lift and glow when selected.

#gradient #transform #shadow

Canlı incele Formlar

Color Cycling Radio

Selected radio option cycles through rainbow colors.

#animation #gradient #transform

Canlı incele Formlar

Confetti Radio

Radio option with confetti burst on selection for celebration.

#animation #gradient #transform

Canlı incele Formlar

Fill Width Radio

Radio card with fill bar that animates across on selection.

#gradient #transform #border

Canlı incele Formlar

Glass Radio

Frosted glassmorphism radio cards with backdrop blur.

#gradient #transform #border

Canlı incele Formlar

Gradient Radio

Radio with gradient fill background when selected.

#gradient #shadow #border

Canlı incele Formlar

Rounded Square Radio

Radio with rounded square indicator and gradient fill.

#gradient #transform #border

Canlı incele Formlar

Scale Radio

Selected radio option scales up its label text slightly.

#hover #gradient #transform

Canlı incele Formlar

Slide Indicator Radio

Radio with sliding indicator that moves between options.

#gradient #transform #border

Canlı incele Formlar

Spotlight Radio

Radio with radial spotlight glow on selected option.

#gradient #transform #border

Canlı incele Formlar

Custom Range Track

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

#hover #gradient #shadow

Canlı incele Formlar

Gradient Border Search

Search bar with animated gradient border.

#animation #gradient #transform

Canlı incele Formlar

Gradient Border Select

Select wrapped with an animated gradient border.

#animation #gradient #transform

Canlı incele Formlar

3D Slider

Skeuomorphic 3D slider with raised thumb.

#gradient #shadow #border

Canlı incele Formlar

Color Hue Slider

Range slider with a rainbow gradient track for hue selection.

#gradient #shadow #border

Canlı incele Formlar

Cyberpunk Slider

Cyberpunk neon slider with magenta fill and cyan thumb.

#gradient #shadow #border

Canlı incele Formlar

Fill Track Slider

Slider with a colored fill that follows the thumb.

#gradient #shadow #border

Canlı incele Formlar

Gradient Thumb Slider

Slider with a colorful gradient thumb.

#animation #gradient #transform

Canlı incele Formlar

Gradient Track Slider

Range slider with a gradient track background.

#gradient #shadow #border

Canlı incele Formlar

Rotate Slider

Slider whose thumb rotates while being dragged.

#animation #gradient #transform

Canlı incele Formlar

Rounded Slider

Range slider with rounded track and large rounded thumb.

#hover #gradient #transform

Canlı incele Formlar

3D Press Switch

Switch knob depresses 3D-style when toggled.

#gradient #transform #shadow

Canlı incele Formlar

Aurora Switch

Toggle with aurora-like gradient when active.

#animation #gradient #transform

Canlı incele Formlar

Color Cycling Switch

Switch track cycles through rainbow colors when active.

#animation #gradient #transform

Canlı incele Formlar

Fill Track Switch

Track fills with gradient from left when toggled on.

#gradient #transform

Canlı incele Formlar

Glass Switch

Frosted glassmorphism switch with backdrop blur effect.

#gradient #transform #border

Canlı incele Formlar

Gradient Switch

Switch with animated gradient track that activates when on.

#animation #gradient #transform

Canlı incele Formlar

Icon Switch

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

#gradient #transform

Canlı incele Formlar

Pill Switch

Extra rounded pill-shaped toggle with smooth motion.

#gradient #transform

Canlı incele Formlar

Retro Lever Switch

Vintage lever-style switch with metallic knob and base.

#gradient #transform #shadow

Canlı incele Formlar

Rounded Switch

Switch with rounded square knob and gradient track.

#gradient #transform

Canlı incele Formlar

Shine Switch

Switch with light sweep across track when toggled on.

#animation #gradient #transform

Canlı incele Formlar

Slide Switch

Smooth sliding track with color gradient reveal.

#gradient #transform

Canlı incele Formlar

Resizable Textarea

Textarea with visible resize handle styling.

#gradient #shadow #border

Canlı incele Formlar

3D Pressable Input

3D input that appears to depress when focused.

#gradient #transform #shadow

Canlı incele Formlar

Aurora Background Input

Input with shifting aurora gradient background.

#animation #gradient #border

Canlı incele Formlar

Dark Theme Input

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

#gradient #shadow #border

Canlı incele Formlar

Dark Glassmorphism Input

Frosted dark glass input with backdrop blur and gradient sheen.

#gradient #shadow #border

Canlı incele Formlar

Animated Gradient Border Input

Input with animated rotating gradient border around it.

#animation #gradient #border

Canlı incele Formlar

Paper Texture Input

Vintage paper styled input with warm tones and serif font.

#gradient #shadow #border

Canlı incele Formlar

Vaporwave Gradient Input

Vaporwave aesthetic with pink-purple gradient and retro grid.

#gradient #shadow #border

Canlı incele Formlar

Underline Focus Field

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

#gradient #transform #border

Canlı incele Formlar

Valid Background Input

Background subtly turns green-tinted when valid.

#gradient #shadow #border

Canlı incele Hover

Ambient Glow Fill

Ambient glow fills the surface on hover.

#hover #gradient