LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

#border CSS efektleri

"border" etiketiyle eşleşen 3.995 ü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

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

Draw Underline Floating Label

Material-style input with an underline that draws itself in on focus.

#transform #border

Canlı incele Formlar

Has-Selector Validation

The wrapper turns red only after a value is entered and fails, thanks to :has().

#border #validation #has-selector

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

File Upload Input

Custom styled file upload input with icon.

Canlı incele Formlar

File Drop Zone Input

Drag-and-drop file upload zone with dashed border.

#hover #transform #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 Strength Input

Password input with a visual strength meter bar below.

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

Invalid Border Bottom Input

Underline turns red when content is invalid.

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 Underline Input

Bottom underline grows in red when invalid.

#transform #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

Active Indicator OTP

OTP boxes with active indicator bar at the bottom.

#transform #border

Canlı incele Formlar

Bold OTP Input

Heavy bold OTP with strong contrast.

Canlı incele Formlar

Bordered OTP Input

OTP boxes with thick bold borders.

#transform #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

Canlı incele Formlar

Circle OTP Input

OTP input displayed as circular dots.

#transform #shadow #border

Canlı incele Formlar

Color Cycling OTP Input

OTP boxes that cycle through colors when focused.

#animation #shadow #border

Canlı incele Formlar

Cyberpunk OTP Input

Cyberpunk-styled OTP with magenta-cyan accent glow.

#shadow #border

Canlı incele Formlar

Dark OTP Input

Deep dark OTP boxes with subtle inner glow.

#shadow #border

Canlı incele Formlar

Single Input with Dashes

Single OTP input with dashed separators.

#transform #border

Canlı incele Formlar

Dots OTP Input

OTP input that displays dots instead of typed characters.

#shadow #border

Canlı incele Formlar

Filled Indicator OTP

OTP boxes that fill with color when content is added.

#shadow #border

Canlı incele Formlar

Glass OTP Input

Frosted glass OTP boxes with translucent borders.

#shadow #border #filter