LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

Öne çıkanlar

En popüler CSS efektleri

Kütüphanedeki 10.238 efekt, en çok incelenenden başlayarak sıralandı. Hepsi saf CSS — kopyala, yapıştır, çalışır; kütüphane veya derleme adımı gerekmez.

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

Canlı incele Formlar

Gradient Border OTP

OTP input wrapped with animated gradient borders.

#animation #gradient #border

Canlı incele Formlar

Light OTP Input

Bright light-themed OTP boxes with clean borders.

#shadow #border

Canlı incele Formlar

Line Connector OTP

OTP boxes connected by a horizontal line at the bottom.

Canlı incele Formlar

Minimal OTP Input

Ultra-minimal OTP with no borders, only underlines.

Canlı incele Formlar

Modern OTP Input

Sleek modern OTP with subtle shadows and gradient focus.

#shadow #border

Canlı incele Formlar

Neon OTP Input

Cyberpunk-style neon OTP boxes with glow.

#shadow #border

Canlı incele Formlar

Rounded OTP Input

OTP input with fully rounded corners.

#transform #shadow #border

Canlı incele Formlar

Segmented OTP Display

Segmented OTP input where boxes connect via shared borders.

Canlı incele Formlar

Sharp Corner OTP Input

OTP input with slightly rounded but bold corners.

#shadow #border

Canlı incele Formlar

Square OTP Input

OTP input with sharp square corners.

Canlı incele Formlar

Thin OTP Input

Elegant thin OTP with hairline borders.

#shadow #border

Canlı incele Formlar

Underline OTP Input

OTP boxes with just an underline instead of full border.

Canlı incele Formlar

Payment Amount Input

Currency amount input with prefix symbol and decimal alignment.

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

Cardholder Name Input

Cardholder name input with uppercase auto-format styling.

#transform #shadow #border

Canlı incele Formlar

Credit Card Number Input

Credit card number input with 4-grouped visual segments and card icon.

#shadow #border

Canlı incele Formlar

Coupon Code Input

Coupon code input with apply button and dashed border.

#hover #transform #shadow

Canlı incele Formlar

Currency Picker Input

Currency selector dropdown with flag and code display.

#transform #shadow #border

Canlı incele Formlar

Card CVC Input

Card CVC code input with masked text and lock icon.

#transform #shadow #border

Canlı incele Formlar

Discount Code Input

Discount code input with verified checkmark when filled.

#transform #shadow #border

Canlı incele Formlar

Card Expiry MM/YY Input

Card expiry date input with MM/YY format placeholder.

#shadow #border

Canlı incele Formlar

Gift Card Input

Gift card code input with gift icon and reveal toggle.

#hover #transform #shadow

Canlı incele Formlar

Loyalty Points Input

Loyalty points input with balance display and redeem button.

#hover #gradient #shadow

Canlı incele Formlar

Quantity Stepper Input

Quantity stepper with minus/plus buttons and current count.

Canlı incele Formlar

Shipping Method Selector

Shipping method radio cards with delivery time and cost.

#hover #shadow #border

Canlı incele Formlar

Split Payment Input

Split payment input showing two amounts and divider.

#transform #shadow #border

Canlı incele Formlar

Subscription Plan Input

Subscription plan selector with monthly/annual toggle.

#hover #shadow #border

Canlı incele Formlar

Tax Calculator Input

Tax calculation input showing base, rate, and total breakdown.

Canlı incele Formlar

Tip Selector Input

Tip percentage selector with preset buttons and custom input.

#hover #shadow #border

Canlı incele Formlar

Order Total Display

Order total display with large amount and discount applied.

#gradient #transform #shadow

Canlı incele Formlar

Billing ZIP Input

Billing ZIP / postal code input with location pin icon.

#shadow #border