Ö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 Butonlar

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Canlı incele Butonlar

Spotlight Sweep Button

A warm yellow spotlight glow follows the cursor across the surface.

#gradient #hover #border

Canlı incele Kartlar

Locked Achievement Card

Locked achievement card with a padlock, blurred reward, and unlock hint.

#animation #gradient #transform

Canlı incele Kartlar

Article Card

Blog article card with category tag, title, and read time.

#shadow #border

Canlı incele Kartlar

Cotton Candy Card

Cotton candy card with fluffy texture and pastel colors.

#gradient #shadow #border

Canlı incele Onay Kutuları

Plum Color Toggle

A color swatch that fills with plum when checked.

#transform #shadow #border

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ı

Yellowjacket Toggle

A yellowjacket spins yellow when checked.

#animation #transform #shadow

Canlı incele Formlar

Blur Background Input

Input that blurs the surrounding area on focus.

#border #filter

Canlı incele Formlar

Stars Background Input

Cosmic starfield background with twinkling dots.

#animation #gradient #shadow

Canlı incele Formlar

Bottom Only Border Input

Minimalist input with only a bottom border that thickens on focus.

#shadow #border

Canlı incele Formlar

Flip Radio

Radio card flips in 3D when selected.

#gradient #transform #border

Canlı incele Hover

Bounce Elastic

Elastic overshoot bounce on hover.

#hover #transform

Canlı incele Hover

Curtain Fall

Curtain falls down to cover content on hover.

#hover #gradient #transform

Canlı incele Hover

Edge Light Up

All four edges light up on hover.

#hover #shadow

Canlı incele Hover

Needle Right Edge

Vertical needle bar slides in from right edge on hover.

#hover #animation #gradient

Canlı incele Hover

Glitter Sparkle

Glitter sparkles on hover.

#hover #animation #gradient

Canlı incele Hover

Wave Ripple Distort

Wave ripple distortion on hover.

#hover #animation #transform

Canlı incele Hover

Zoom Blur

Content zooms in with a radial blur, simulating a dolly zoom on hover.

#gradient #hover #shadow

Canlı incele Yükleyiciler

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Canlı incele Yükleyiciler

Checkers Jump

Checker piece jumping over another.

#animation #gradient

Canlı incele Yükleyiciler

Elevator

Elevator car rising and falling inside its shaft.

#animation #gradient #border

Canlı incele Kayan Yazılar

Cusp Timestamp Feed

Each headline drags a two line date and clock stamp whose separator keeps blinking.

#marquee #timestamp #feed

Canlı incele Kayan Yazılar

Drift Quote Pair

Every entry stacks a short line over its author, with a tilting closing quote mark.

#marquee #quote #author

Canlı incele Navigasyon

Arrow Hexagon Shape Navbar

Nav links shaped as hexagons with arrow flow.

#hover

Canlı incele Navigasyon

Icon Text Breadcrumbs

Breadcrumbs with icons and text.

#hover

Canlı incele Navigasyon

Line Separator Breadcrumbs

Breadcrumbs with vertical line separators.

#hover #transform

Canlı incele Navigasyon

Underline Active Breadcrumbs

Breadcrumbs with underline on active item.

#hover #transform

Canlı incele Navigasyon

Multi Level Drawer Navbar

Multi-level drawer with progressively indented sub-sections.

#hover #border

Canlı incele Navigasyon

Floating Dock Navbar

macOS-style floating dock navbar with bouncy hover.

#hover #gradient #transform

Canlı incele Navigasyon

Glass Light Navbar

Light glass navbar with subtle backdrop tint.

#hover #gradient #shadow

Canlı incele Navigasyon

Vertical Tab Glow Active

Vertical tabs with a glowing active item casting ambient light.

#hover #shadow

Canlı incele Navigasyon

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

#hover #animation #gradient

Canlı incele İlerleme

Oasis Stairs Progress

A staircase of five blocks where the climbed tiers are lit and a marker sits on the current step.

#staircase #flexbox #gradient

Canlı incele Kaydırıcılar

Canyon RGB Channels

Three stacked channel rails mix a colour the way a canyon wall layers its bands.

#slider #rgb #color-picker

Canlı incele Kaydırıcılar

Valve Thermostat Lever

A raked steel cursor rides a recessed slot between an eco stop and a boost stop, under a lit readout.

#slider #thermostat #lever

Canlı incele Sekmeler

Chalk Rounded Tabs

One soft rounded shell with the content above and a chalk thumb sliding below.

#transform #rounded #shadow

Canlı incele Metin

Bicolor Gradient

Smooth bicolor diagonal gradient.

#gradient

Canlı incele Metin

Brutalist Raw

Raw brutalist text with stark black on white.

#border

Canlı incele Metin

Chess Knight

Chess knight piece on text.

#animation #transform #shadow

Canlı incele Metin

Chevron Arrows

Bold chevron arrow stripes in two-tone.

#gradient

Canlı incele Metin

Cyberpunk Glitch

Yellow cyberpunk text with red/cyan offset and periodic skew glitch.

#animation #shadow #transform

Canlı incele Metin

Fade Depth

Text fading from foreground into deep shadow.

#gradient

Canlı incele Metin

Fade Pulse Deep

Deep pulsing fade animation.

#animation

Canlı incele Metin

Torch Pass

A warm torch light passes across the text.

#animation #gradient

Canlı incele İpuçları

Chevron Arrow

Tooltip with chevron-style arrow pointing to trigger.

#hover #transform #border

Canlı incele İpuçları

Charcoal Noir

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

#hover #transform #shadow

Canlı incele İpuçları

Step Counter

Tooltip with step counter indicator above the trigger.

#hover #transform #border

Canlı incele Zaman Çizelgeleri

Piston Pump Pipeline

Three bores drive the extract, transform and load stages with offset piston strokes.

#animation #transform #pipeline

Canlı incele Zaman Çizelgeleri

Sway Album Timeline

Three dated prints hang from a twisted cord and swing gently out of step with each other.

#animation #shadow #album

Canlı incele Anahtarlar

Awake / Tired

Wide-awake eye closes into a sleepy yawn.

#transform #shadow

Canlı incele Anahtarlar

Bit Flip

Binary bit flips between 0 and 1 in monospace green.

#transform #shadow #border

Canlı incele Anahtarlar

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Canlı incele Anahtarlar

Obsidian Volcanic

Volcanic obsidian glass with smoke sheen.

#gradient #transform #shadow

Canlı incele Anahtarlar

Tone / Dead

Sound tone knob becomes a skull when the tone goes dead.

#transform #shadow

Canlı incele Anahtarlar

Whirl Pool

Spinning whirlpool swirls water around the knob.

#animation #gradient #transform

Canlı incele Akordeonlar

Echo Origami Accordion

The panel unfolds in two paper leaves that swing down on a shared crease.

#checkbox #origami #perspective

Canlı incele Akordeonlar

Rivet Downloads Accordion

Build groups punch open a format list where each row shows its extension and weight.

#details #download #clip-path

Canlı incele Uyarılar

Chalk Fade Alert

The status label cross fades from a saving state into a saved state and back.

#fade #state #crossfade

Canlı incele Uyarılar

Pulse Battery Alert

A low battery warning whose cell drains down to a thin red sliver and keeps throbbing.

#battery #power #low

Canlı incele Uyarılar

Ridge Underline Alert

A borderless message underlined by a stripe that keeps redrawing itself from the left.

#underline #bottom-border #minimal

Canlı incele Uyarılar

Ruby Shake Alert

A destructive error box jolts sideways at the end of every animation cycle.

#error #shake #critical

Canlı incele Uyarılar

Turbine Camera Alert

A device permission notice with an opening lens aperture and a live input level meter.

#permission #camera #microphone

Canlı incele Avatarlar

Copper Verified Badge Avatar

A copper check badge sits in the corner and pops when the avatar is hovered.

#badge #verified #animation

Canlı incele Avatarlar

Gear Crown Leader Avatar

A clipped crown sways above the leader avatar and a rank pill hangs beneath it.

#crown #rank #clip-path

Canlı incele Avatarlar

Glide Scrollable Avatar Rail

A horizontally scrollable member rail with a slim custom scrollbar under it.

#scroll #group #rail

Canlı incele Rozetler

Action Edit Badge

Edit action badge with pencil glyph and blue accent.

#gradient #shadow #border

Canlı incele Rozetler

Breathe Glow Badge

Badge with breathing glow effect.

#animation #transform #shadow

Canlı incele Rozetler

Glisten Badge

Badge with glistening sparkle dots animation.

#animation #gradient #shadow

Canlı incele Rozetler

Pulse Color Badge

Badge with color cycling through palette.

#animation

Canlı incele Rozetler

Ripple Badge

Badge with expanding ripple waves.

#animation #transform #border

Canlı incele Rozetler

Spring Pop Badge

Badge that springs into view with overshoot.

#animation #transform

Canlı incele Rozetler

Caret Typing Badge

Badge with blinking caret like terminal input.

#animation #border

Canlı incele Rozetler

Arctic Ice Badge

Icy white-blue badge with crystalline chill.

#gradient #shadow #border

Canlı incele Rozetler

Award Ribbon

Award ribbon medal with two hanging tails.

#gradient #transform #shadow

Canlı incele Rozetler

Brutalist Cyan Badge

Brutalist cyan badge with sharp offset shadow.

#transform #shadow #border

Canlı incele Rozetler

Cave Stalactite Badge

Sharp stalactite-shaped badge with pointed bottom edge.

#gradient #border

Canlı incele Rozetler

Solid Lime Pill

#transform #shadow #border

Canlı incele Rozetler

State Queued Badge

Queued state badge with hourglass-style indicator.

#border

Canlı incele Rozetler

Tag With Hole

Price tag with string hole and notched left side.

#transform #shadow

En çok incelenen efektler

Kategoriye göre gez

Popüler etiketler