LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

#shadow CSS efektleri

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

Canlı incele Formlar

3D Flip Floating Label

Label performs a 3D flip rotation when the input receives focus.

#transform #shadow #border

Canlı incele Formlar

Amber Accent Floating Label

Warm amber-accented floating label input for cozy forms.

#transform #shadow #border

Canlı incele Formlar

Bounce Floating Label

Label bounces up with an elastic spring when input is focused.

#animation #transform #shadow

Canlı incele Formlar

Corner Floating Label

Label slides to the top-left corner when input is focused.

#transform #shadow #border

Canlı incele Formlar

Double Border Floating Label

Input with a double border that animates on focus, label lifts above.

#transform #shadow #border

Canlı incele Formlar

Glow Floating Label

Input glows softly with a label that lifts and adopts the glow color.

#shadow #border

Canlı incele Formlar

Floating Label Field

The placeholder lifts into a small label above the field once anything is typed.

#border #shadow #transform

Canlı incele Formlar

Outline Draw Floating Label

Border outline draws itself around the input as label floats up.

#transform #shadow #border

Canlı incele Formlar

Rose Accent Floating Label

Romantic rose-tinted floating label input.

#transform #shadow #border

Canlı incele Formlar

Floating Label Scale

Label scales down and slides up with a smooth springy motion.

#transform #shadow #border

Canlı incele Formlar

Shadow Floating Label

Label lifts with a long soft shadow trailing behind it.

#transform #shadow #border

Canlı incele Formlar

Slide Left Floating Label

Label slides left then up when input receives focus.

#transform #shadow #border

Canlı incele Formlar

Icon Background Input

Input with icon contained in a colored background square.

#transform #shadow #border

Canlı incele Formlar

Bounce Icon Input

Input whose icon continuously bounces when focused.

#animation #transform #shadow

Canlı incele Formlar

Calendar Icon Input

Date input with calendar icon that flips on focus.

#transform #shadow #border

Canlı incele Formlar

Clock Icon Input

Time input with clock icon that ticks on focus.

#animation #transform #shadow

Canlı incele Formlar

Credit Card Icon Input

Card number input with a credit card icon that tilts.

#transform #shadow #border

Canlı incele Formlar

Emphasis Icon Input

Input with an emphasized icon that scales and glows strongly.

#transform #shadow #border

Canlı incele Formlar

Eye Icon Input

Password input with eye icon that opens on focus.

#transform #shadow #border

Canlı incele Formlar

Fade Icon Input

Input whose icon fades in/out smoothly on focus.

#transform #shadow #border

Canlı incele Formlar

Left Icon Input

Standard input with a left-aligned icon.

#transform #shadow #border

Canlı incele Formlar

Location Icon Input

Address input with a location pin icon that bounces.

#animation #transform #shadow

Canlı incele Formlar

Lock Icon Input

Password input with a lock icon that unlocks on focus.

#transform #shadow #border

Canlı incele Formlar

Phone Icon Input

Phone input with phone icon that vibrates on focus.

#animation #transform #shadow

Canlı incele Formlar

Pulse Icon Input

Input whose icon pulses softly when focused.

#animation #transform #shadow

Canlı incele Formlar

Right Icon Input

Input with a right-aligned icon that highlights on focus.

#transform #shadow #border

Canlı incele Formlar

Rotate Icon Input

Input whose icon rotates continuously when focused.

#animation #transform #shadow

Canlı incele Formlar

Round Icon Input

Input with a fully rounded icon container that lights up.

#transform #shadow #border

Canlı incele Formlar

Scale Icon Input

Input whose icon scales up smoothly on focus.

#transform #shadow #border

Canlı incele Formlar

Search Icon Input

Input with a magnifier search icon that zooms on focus.

#transform #shadow #border

Canlı incele Formlar

Slide Icon Input

Input whose icon slides left when focused.

#transform #shadow #border

Canlı incele Formlar

Square Icon Input

Input with a square icon container on the right.

#transform #shadow #border

Canlı incele Formlar

User Icon Input

Username input with a person icon that glows on focus.

#transform #shadow #border

Canlı incele Formlar

Barcode Input

Input with barcode pattern background.

#gradient #transform #shadow

Canlı incele Formlar

Birthday Input

Birthday input with cake icon.

#transform #shadow #border

Canlı incele Formlar

Chip Style Input

Input displayed as a removable chip.

#hover #transform #shadow

Canlı incele Formlar

Color Picker Input

Color picker with custom swatch preview.

#shadow #border

Canlı incele Formlar

Rainbow Color Picker

Color picker displayed as a horizontal rainbow gradient strip.

#gradient #shadow #border

Canlı incele Formlar

Color Swatch Picker

Color picker displayed as a row of preset swatches.

#transform #shadow #border

Canlı incele Formlar

Coupon Code Input

Coupon code input with apply button.

#hover #transform #shadow

Canlı incele Formlar

Credit Card Input

Credit card number input with card type icon.

#transform #shadow #border

Canlı incele Formlar

Currency Input

Currency input with dollar sign prefix.

#shadow #border

Canlı incele Formlar

CVC Input

CVC security code input with lock icon.

#hover #transform #shadow

Canlı incele Formlar

Date Picker Input

Date input with calendar icon and styled date picker.

#transform #shadow #border

Canlı incele Formlar

Date Input with Calendar Icon

Date input with animated calendar icon that bounces on focus.

#animation #transform #shadow

Canlı incele Formlar

Datetime Local Input

Combined date and time picker input.

#transform #shadow #border

Canlı incele Formlar

Email Input

Email input with @ symbol prefix and validation styling.

#transform #shadow #border

Canlı incele Formlar

Email Validation Input

Email input that turns green when valid, red when invalid.

#transform #shadow #border

Canlı incele Formlar

Month Input

Month picker input with year/month selection.

#transform #shadow #border

Canlı incele Formlar

Number Input

Number input with custom styled steppers.

#hover #shadow #border

Canlı incele Formlar

Number Stepper Input

Number input with custom increment/decrement buttons.

#hover #shadow #border

Canlı incele Formlar

Password Input

Password input with lock icon and strength indicator border.

#transform #shadow #border

Canlı incele Formlar

Password Input with Eye Toggle

Password input with CSS-only eye icon that reveals via :focus.

#hover #transform #shadow

Canlı incele Formlar

Percentage Input

Percentage input with % suffix.

#shadow #border

Canlı incele Formlar

QR Code Input

Input with QR code scan icon and dotted border.

#hover #transform #shadow

Canlı incele Formlar

Range Slider Input

Range slider with custom styled thumb and track.

#hover #gradient #transform

Canlı incele Formlar

Range Slider with Bubble

Range slider with a value bubble that follows the thumb.

#transform #shadow #border

Canlı incele Formlar

Search Input

Classic search bar with magnifier icon.

#transform #shadow #border

Canlı incele Formlar

Search Input with Animated Icon

Search input whose magnifier icon spins on focus.

#transform #shadow #border

Canlı incele Formlar

Search Input with Loading

Search input that shows a loading spinner when typing.

#animation #transform #shadow

Canlı incele Formlar

Tag Input Field

Input that displays tags as removable chips.

#hover #shadow #border

Canlı incele Formlar

Telephone Input

Phone number input with country code prefix.

#shadow #border

Canlı incele Formlar

Telephone Format Input

Phone input with formatted placeholder and country flag.

#shadow #border

Canlı incele Formlar

Standard Text Input

Clean standard text input with smooth focus state.

#shadow #border

Canlı incele Formlar

Time Input

Time input with clock icon and styled picker.

#transform #shadow #border

Canlı incele Formlar

URL Input

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

#shadow #border

Canlı incele Formlar

URL Preview Input

URL input with a small favicon-style preview bubble.

#transform #shadow #border

Canlı incele Formlar

Week Input

Week picker input with calendar icon.

#transform #shadow #border

Canlı incele Formlar

ZIP Code Input

ZIP/Postal code input with location pin icon.

#transform #shadow #border

Canlı incele Formlar

Invalid Background Input

Background subtly turns red-tinted when invalid.

#gradient #shadow #border

Canlı incele Formlar

Animated Cross Mark Input

Cross X draws itself when input is invalid.

#animation #transform #shadow

Canlı incele Formlar

Error State Input

Input with full error state — red border, X icon, and shake.

#animation #transform #shadow

Canlı incele Formlar

Invalid Glow Input

Input glows red continuously when invalid.

#animation #shadow #border

Canlı incele Formlar

Invalid Red Glow Input

Input emits a soft red glow when content is invalid.

#shadow #border

Canlı incele Formlar

Invalid Icon Shake Input

Red icon shakes back and forth when invalid.

#animation #transform #shadow

Canlı incele Formlar

Invalid Message Input

Input that shows a red error message below when invalid.

#transform #shadow #border

Canlı incele Formlar

Invalid Red Border Input

Input turns red when invalid, with red glow.

#shadow #border

Canlı incele Formlar

Invalid Shake Input

Input shakes horizontally when invalid.

#animation #transform #shadow

Canlı incele Formlar

Invalid Slide In Message

Error message slides in from the right when invalid.

#transform #shadow #border

Canlı incele Formlar

Invalid Vibrate Input

Input vibrates briefly when content becomes invalid.

#animation #transform #shadow

Canlı incele Formlar

OKLCH Field States

Rest, hover and focus shades of one field are all mixed from a single OKLCH accent.

#hover #border #shadow

Canlı incele Formlar

3D OTP Input

OTP boxes with 3D shadow that depress on focus.

#transform #shadow #border

Canlı incele Formlar

4-Box OTP Input

Four-box OTP input with rounded corners.

#transform #shadow #border

Canlı incele Formlar

6-Box OTP Input

Six segmented OTP input boxes with active state highlight.

#transform #shadow #border

Canlı incele Formlar

Glowing OTP Boxes

OTP boxes that glow when active or filled.

#shadow #border

Canlı incele Formlar

OTP Code Boxes

Six single-character cells that light up and lift as each digit is entered.

#border #shadow #transform

Canlı incele Formlar

Card Style OTP

OTP boxes that look like raised cards with shadow.

#transform #shadow #border