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 Kartlar

Beer Flight Card

Beer flight card with sample glasses and ABV range.

#gradient #shadow #border

Canlı incele Kartlar

Beer Pair Tips Card

Beer pairing tips card with beer style, dish pairing, and reasoning.

#gradient #shadow #border

Canlı incele Kartlar

Circuit Diagram Card

Circuit diagram card with battery, switch, and bulb.

#gradient #shadow #border

Canlı incele Kartlar

Climb Pitch Card

Rock climbing pitch card with grade, length, and protection.

#gradient #shadow #border

Canlı incele Kartlar

Cocktail Menu Card

Cocktail menu card with a glass illustration, ABV, and tasting notes.

#gradient #shadow #border

Canlı incele Kartlar

Codex Lore Card

Codex lore card with an illuminated initial, parchment, and ornate border.

#gradient #shadow #border

Canlı incele Kartlar

Coffee Passport

Coffee passport card with stamp grid, roast notes, and a bean icon.

#gradient #transform #shadow

Canlı incele Kartlar

Cotton Candy Card

Cotton candy card with fluffy texture and pastel colors.

#gradient #shadow #border

Canlı incele Kartlar

Discount Coupon

Coupon card with scissors, a dashed cut line, notch cutouts and a big discount percentage.

#gradient #shadow #border

Canlı incele Kartlar

Diet Plan Card

Daily diet plan card with meal slots and macros split.

#shadow #border

Canlı incele Kartlar

Earthquake Card

Earthquake alert card with magnitude, depth, and epicenter.

#gradient #shadow #border

Canlı incele Kartlar

Energy Type Card

Energy type card showing kinetic vs potential with formula.

#gradient #shadow #border

Canlı incele Kartlar

Estimate Card

Service estimate card with breakdown and labor hours.

#shadow #border

Canlı incele Kartlar

Student ID

Student ID card with a portrait, university header, and a barcode strip.

#gradient #shadow #border

Canlı incele Kartlar

Vocabulary Word Card

Vocabulary word card with definition, pronunciation, and example.

#shadow #border

Canlı incele Onay Kutuları

3D Pyramid Check

A 3D pyramid that flips and turns gold when checked.

#transform #border #3d

Canlı incele Onay Kutuları

Amber Fossil Stone

A golden amber stone reveals an ancient inclusion when checked.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Circle Stroke Draw

An SVG circle outline draws itself around a center dot that pops in when checked.

#border #transform #rotate

Canlı incele Onay Kutuları

Hourglass Checkbox

The glass rotates half a turn and the sand settles into the lower bulb.

#clip-path #transform #border

Canlı incele Onay Kutuları

Pulsar Radio Beams

Concentric radio waves pulse outward when this star is checked.

#animation #transform #shadow

Canlı incele Onay Kutuları

Ripple Burst Check

Toggling on triggers an expanding ripple ring around the checkbox.

#animation #border #transform

Canlı incele Onay Kutuları

Scale Pop Checkmark

The checkmark scales up with overshoot then settles, paired with a soft background.

#border #transform #rotate

Canlı incele Onay Kutuları

Sparkle Twinkle

A four-pointed sparkle that twinkles in with a magenta glow and slow spin when checked.

#animation #shadow #border

Canlı incele Onay Kutuları

Tarot Card Reveal

A mystical tarot card flips to reveal its face when checked.

#gradient #transform #border

Canlı incele Onay Kutuları

Wifi Signal Toggle

An SVG wifi icon lights up in cyan with a soft glow when the device goes online.

#shadow #border #filter

Canlı incele Formlar

Frosted Glass Input

Heavy frost effect with crystalline texture overlay.

#shadow #border #filter

Canlı incele Formlar

Glassmorphism Input

Frosted glass input with backdrop blur and translucent border.

#shadow #border #filter

Canlı incele Formlar

Stars Background Input

Cosmic starfield background with twinkling dots.

#animation #gradient #shadow

Canlı incele Formlar

Dashed Border Input

Input with a dashed border that solidifies on focus.

#shadow #border

Canlı incele Formlar

Letter Spacing Floating Label

Label expands its letter spacing as it lifts up.

#transform #border

Canlı incele Formlar

Pill Floating Label

Rounded pill input whose label slides into a small floating chip.

#transform #shadow #border

Canlı incele Formlar

Rotate Floating Label

Label rotates 90 degrees then settles above the input.

#transform #shadow #border

Canlı incele Formlar

Scale Down Floating Label

Label shrinks to the corner with a smooth scale-down motion.

#transform #border

Canlı incele Formlar

Both Icons Input

Input with icons on both left and right sides.

#transform #shadow #border

Canlı incele Formlar

Invalid Icon Input

Input with a red X icon that appears when invalid.

#transform #shadow #border

Canlı incele Formlar

Retro Terminal OTP

Old terminal-style OTP with green phosphor text.

#shadow #border

Canlı incele Formlar

Checkmark Radio

Radio that displays an animated checkmark inside the circle when picked.

#transform #border

Canlı incele Formlar

Flip Radio

Radio card flips in 3D when selected.

#gradient #transform #border

Canlı incele Formlar

Glass Search Bar

Frosted glass search bar with translucent background.

#transform #shadow #border

Canlı incele Formlar

Skeuomorphic 3D Input

Realistic 3D input with pressed-in appearance and bevels.

#gradient #shadow #border

Canlı incele Hover

Border Gradient Flow

Animated gradient border flows on hover.

#hover #animation #gradient

Canlı incele Hover

Color Invert Pill

Pill swaps its background and text colors instantly on hover.

#hover #border #transform

Canlı incele Hover

Dashes Crawl Frame

Dashed border marches around the element on hover.

#hover #animation #border

Canlı incele Yükleyiciler

Arc Sweep

Arc sweeping around a center point.

#animation #transform #border

Canlı incele Yükleyiciler

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Canlı incele Yükleyiciler

Baseball Pitch

Baseball stitching spinning as it flies past home plate.

#animation #gradient #transform

Canlı incele Yükleyiciler

Blender Blade

Blender jar with whirring blades at the bottom.

#animation #gradient #transform

Canlı incele Yükleyiciler

Flash Flood

Flash flood water rising rapidly.

#animation #gradient #border

Canlı incele Yükleyiciler

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

Canlı incele Yükleyiciler

Loop Roll

Loop shape rolling end over end.

#animation #transform #border

Canlı incele Yükleyiciler

Microwave Turntable

Microwave glass plate rotating with a glowing interior.

#animation #gradient #transform

Canlı incele Yükleyiciler

Pilgrim Hat

Pilgrim hat with shiny buckle.

#animation #gradient #transform

Canlı incele Yükleyiciler

Stopwatch Tick

A stopwatch face with a red second hand ticking in 60 discrete steps.

#animation #border #transform

Canlı incele Yükleyiciler

Timing Belt

Timing belt moving over gears.

#animation #transform #border

Canlı incele Navigasyon

Multi Level Drawer Navbar

Multi-level drawer with progressively indented sub-sections.

Canlı incele Navigasyon

Stack Cards Drawer Navbar

Drawer with stacked card-style links that fan out on hover.

#hover #transform #shadow

Canlı incele Navigasyon

Neon Edge Navbar

Navbar with neon glowing edges.

#hover #transform #shadow

Canlı incele Navigasyon

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

#hover #animation #gradient

Canlı incele Navigasyon

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

#hover #animation #gradient

Canlı incele Navigasyon

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

#hover #animation #gradient

Canlı incele Navigasyon

Thick Underline Tabs

Tabs with a thick underline indicator.

Canlı incele Kaydırıcılar

Quartz Gradient Slider

A prismatic quartz rail runs the full spectrum under a bezelled white knob.

#slider #gradient #spectrum

Canlı incele Sekmeler

Nickel Notch Tabs

A small pointer notch slides under the active tab and aims at the panel below.

#transform #border #shadow

Canlı incele Metin

Brutalist Raw

Raw brutalist text with stark black on white.

Canlı incele Metin

Collage Cutout

Magazine cutout collage ransom-style text.

#transform #border

Canlı incele İpuçları

3D Rotate Y

Tooltip that rotates fully on the Y axis to appear above the trigger.

#hover #transform #border

Canlı incele İpuçları

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

#hover #transform #border

Canlı incele İpuçları

Calendar Event

Calendar event tooltip above the trigger.

#hover #transform #shadow

Canlı incele İpuçları

Charcoal Noir

Near-black charcoal tooltip with a film-noir mood.

#hover #transform #shadow

Canlı incele İpuçları

Circle Mask

Tooltip reveals with a circle mask opening above the trigger.

#hover #transform #border

Canlı incele İpuçları

Commit Hash

Git commit hash tooltip above the trigger.

#hover #transform #border

Canlı incele İpuçları

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Canlı incele İpuçları

Corners Bracket

Tooltip with corner brackets drawing in above the trigger.

#hover #transform #border

Canlı incele İpuçları

Cursor Follow

Tooltip that follows the cursor above the trigger.

#hover #animation #transform

Canlı incele İpuçları

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

#hover #gradient #transform

Canlı incele İpuçları

Fold Bottom

Tooltip unfolds open below the trigger.

#hover #transform #border

Canlı incele İpuçları

Glassmorphism Top

Frosted glass tooltip with backdrop blur above the trigger.

#hover #transform #shadow

Canlı incele İpuçları

Icon Crown

Tooltip with crown icon above the trigger.

#hover #gradient #transform

Canlı incele İpuçları

Mono Dark

Monospace dark tooltip with terminal feel above the trigger.

#hover #transform #border

Canlı incele İpuçları

Overline Draw

Tooltip with animated overline drawing above the trigger.

#hover #gradient #transform

Canlı incele İpuçları

PowerShell

PowerShell blue background tooltip above the trigger.

#hover #transform #shadow

Canlı incele İpuçları

Pulse Attention

Tooltip that pulses to draw attention above the trigger.

#hover #animation #transform

Canlı incele İpuçları

Retro 80s

Retro 80s neon sunset tooltip above the trigger.

#hover #gradient #transform

Canlı incele İpuçları

Rich Avatar

Tooltip with user avatar above the trigger.

#hover #gradient #transform

Canlı incele İpuçları

Shimmer Loading

Shimmer loading placeholder tooltip above the trigger.

#hover #animation #gradient

Canlı incele İpuçları

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

#hover #gradient #transform

Canlı incele İpuçları

Slide Diagonal Bottom-Right

Tooltip slides in from the bottom-right corner of the trigger.

#hover #transform #border

Canlı incele İpuçları

Slide Fade Bottom

Tooltip slides up from below while fading in.

#hover #transform #border

Canlı incele İpuçları

Speech Bubble Top

Cartoon speech bubble tooltip with tail above the trigger.

#hover #transform #border

Canlı incele İpuçları

Step Counter

Tooltip with step counter indicator above the trigger.

#hover #transform #border

Canlı incele İpuçları

Sticky Note

Yellow sticky note tooltip with curl above the trigger.

#hover #transform #shadow

Canlı incele İpuçları

Typing Hint Tooltip

The tooltip shows three animated dots, as if the hint were still being written.

#hover #animation #transform