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 İpuçları

Circle Mask

Tooltip reveals with a circle mask opening above the trigger.

#hover #transform #border

Canlı incele İpuçları

Diamond Grow Clip

Diamond-shaped tooltip that grows from a point above the trigger.

#hover #transform

Canlı incele İpuçları

Message Tail Clip

Chat-bubble tooltip with a clip-path message tail.

#hover #transform

Canlı incele İpuçları

Spiral Shell Clip

Tooltip with a spiral shell-like curved shape.

#hover #transform

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ı

Light Top

Clean light tooltip with subtle shadow above the trigger.

#hover #transform #shadow

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

Canlı incele Zaman Çizelgeleri

Conduit Deploy Stages

Junction boxes sit on a twin conduit run and the stage in flight marches its stripes.

#animation #deploy #list

Canlı incele Zaman Çizelgeleri

Granite Branch Timeline

A granite commit trunk sprouts one side branch that curves out to its own node.

#border #layout #list

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 Zaman Çizelgeleri

Wander Stamp Timeline

A travel journal where every stop carries a perforated postage stamp that tilts on hover.

#border #hover #transform

Canlı incele Anahtarlar

Burlap Rough

Rough burlap surface with rustic coarse fibers.

#gradient #transform

Canlı incele Anahtarlar

Cinnabar Red

Ancient cinnabar red with carved stone knob.

#gradient #transform #shadow

Canlı incele Anahtarlar

Citrine Glow

Glowing citrine yellow with golden warmth.

#gradient #transform #shadow

Canlı incele Anahtarlar

Coins / Gems

Gold coin stash converts to sparkling gems.

#gradient #transform #shadow

Canlı incele Anahtarlar

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Canlı incele Anahtarlar

Crossbow / Slingshot

Crossbow knob becomes a slingshot on the brown track.

#transform #shadow

Canlı incele Anahtarlar

Dense / Sparse

Dense dot texture spreads out into a sparse pattern on toggle.

#gradient #transform #shadow

Canlı incele Anahtarlar

Dive / Surface

Diver knob surfaces to an island on the cyan track.

#transform #shadow

Canlı incele Anahtarlar

Hematite Iron

Hematite iron-black with metallic sheen.

#gradient #transform #shadow

Canlı incele Anahtarlar

Liquid Wave Fill

Track fills with an animated wavy liquid that sloshes as the knob slides.

#animation #shadow #border

Canlı incele Anahtarlar

OKLCH Heat Toggle

Off and on colours sit at the same OKLCH lightness, so only the hue appears to move.

#transform #shadow #oklch

Canlı incele Anahtarlar

Safe / Danger

Green shield flips to a red warning triangle.

#animation #transform #shadow

Canlı incele Anahtarlar

Teleport / Blink

Knob teleports across with a fading blink step.

#transform #shadow

Canlı incele Anahtarlar

Tone / Dead

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

#transform #shadow

Canlı incele Anahtarlar

Tornado Form

Tornado funnel cloud forms spinning across the track.

#animation #gradient #transform

Canlı incele Anahtarlar

Tourmaline Stripe

Tourmaline watermelon stripe with pink-green knob.

#gradient #transform #shadow

Canlı incele Anahtarlar

Trap / Free

Mousetrap knob releases a tiny mouse when toggled on.

#transform #shadow

Canlı incele Anahtarlar

Treble / Bass Clef

Treble clef knob drops to a bass clef on the violet track.

#transform #shadow

Canlı incele Anahtarlar

Weekend / Weekday

Party weekend swaps to a focused weekday briefcase.

#transform #shadow

Canlı incele Anahtarlar

Wool / Cotton

Wool knob becomes a fluffy cotton ball on the cream track.

#transform #shadow

Canlı incele Anahtarlar

Yarn Unwind

Knobby yarn ball rolls across leaving a thread behind.

#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

Flux Page Accordion

Chapters open like a book page turning over on its spine with a soft shade.

#checkbox #book #perspective

Canlı incele Akordeonlar

Gear Release Accordion

Version rows expand into change notes marked by added, fixed and changed dots.

#radio #changelog #max-height

Canlı incele Akordeonlar

Ridge Search Accordion

Search results collected into collapsible groups with hit counts and paths.

#details #search #hover

Canlı incele Akordeonlar

Ripple Quiet Accordion

Hairline rules and wide spacing only, with a dot that rings out while open.

#details #minimal #letter-spacing

Canlı incele Akordeonlar

Shaft Params Accordion

Endpoint rows unpack a parameter grid whose gaps grow open from nothing.

#details #api #grid

Canlı incele Uyarılar

Arc Undo Alert

An undo bar with a digit reel that steps from five down to zero inside a narrow window.

#undo #countdown #reel

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

Cove Slim Alert

A very thin status bar with a colour cycling pip and a hairline that drains away.

#slim #minimal #status

Canlı incele Uyarılar

Dynamo Pending Alert

An approval flow of three nodes where charge flows into the step still being reviewed.

#approval #pending #workflow

Canlı incele Uyarılar

Gasket Survey Alert

A feedback request with five radio scores that stop rippling once a score is chosen.

#survey #rating #radio

Canlı incele Uyarılar

Gear Strength Alert

A password strength notice where only the first of four capsules keeps filling up.

#password #strength #meter

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

Ruby Shake Alert

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

#error #shake #critical

Canlı incele Uyarılar

Tide Quota Alert

A vertical tank on the left fills with rippling water as the daily quota runs out.

#quota #limit #gauge

Canlı incele Uyarılar

Topaz Action Alert

A notice that ends with an action link whose arrow keeps inviting a click.

#action #link #arrow

Canlı incele Uyarılar

Zenith Restart Alert

A restart prompt whose arrow completes one full turn and then rests before turning again.

#update #restart #arrow

Canlı incele Avatarlar

Amber Stacked Avatar Group

Four overlapping avatars fan out into a spaced row while hovered.

#group #overlap #hover

Canlı incele Avatarlar

Circuit Broadcast Wave Avatar

A broadcast ring expands from the avatar while an equalizer meter reads the voice level.

#broadcast #audio-meter #animation

Canlı incele Avatarlar

Dynamo Drawn Monogram Plate

An SVG stroke writes the monogram and then underlines it before restarting the loop.

#svg #monogram #stroke-dasharray

Canlı incele Avatarlar

Ember Speech Bubble Avatar

A chat bubble with a pointed tail floats gently beside the sender avatar.

#bubble #chat #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

Halo Blurred Aura Avatar

A heavily blurred conic aura turns behind the disc and breathes in and out.

#aura #blur #animation

Canlı incele Avatarlar

Marble Story Segment Ring

Segmented story arcs rotate around the avatar and freeze while hovered.

#story-ring #animation #conic-gradient

Canlı incele Avatarlar

Meadow Notched Corner Avatar

A square corner is clipped out of the avatar so a plan chip nests perfectly inside.

#clip-path #notch #badge

Canlı incele Avatarlar

Mica Rank Pill Avatar

A leaderboard rank pill hangs under the avatar with a sliding metal sheen.

#rank #badge #shine

Canlı incele Avatarlar

Orbit Counter Clockwise Loader

The outer arc turns anticlockwise while the inner arc turns the other way.

#loading #counter-clockwise #animation

Canlı incele Avatarlar

Pulse Status Line Avatar

The presence colour lives in the status sentence instead of on the avatar corner.

#status #text #animation

Canlı incele Avatarlar

Reef Greyscale To Colour Avatar

The drawn portrait sits in greyscale until hover restores its saturated reef palette.

#filter #grayscale #hover

Canlı incele Avatarlar

Rivet Achievement Star Avatar

A clipped star medal twinkles at the corner and a small counter reports earned awards.

#achievement #star #clip-path

Canlı incele Avatarlar

Sway Isometric Avatar Plane

Three member tiles lie on an isometric plane that rocks slowly around its centre.

#isometric #transform #group

Canlı incele Avatarlar

Valley Clickable Status Avatar

Clicking the avatar flips the presence label between available and do not disturb.

#checkbox #toggle #status

Canlı incele Avatarlar

Vault Selectable Avatar Grid

A radio group where the chosen avatar lifts out of the row and takes a warm ring.

#radio #selection #grid

Canlı incele Rozetler

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Canlı incele Rozetler

Trophy Achievement

Trophy-style achievement badge with golden shine.

#gradient #shadow #border

Canlı incele Rozetler

Breaking News Badge

Breaking news badge with red pulsing dot.

Canlı incele Rozetler

Success Alert Badge

Green success alert badge.

#shadow #border

Canlı incele Rozetler

Confetti Burst Badge

Badge with colorful confetti burst animation.

#animation #transform

Canlı incele Rozetler

Electric Badge

Badge with electric pulse effect.

#animation #transform #shadow

Canlı incele Rozetler

Glow Pulse Badge

Badge with strong glowing pulse aura.

#animation #shadow

Canlı incele Rozetler

Heartbeat Badge

Badge that beats like a heart.

#animation #transform