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 Yükleyiciler

Game Boy

Classic handheld Game Boy with a flickering screen.

#animation #gradient #transform

Canlı incele Yükleyiciler

Helicopter Blade

Helicopter rotor blades spinning above the cockpit.

#animation #gradient #transform

Canlı incele Yükleyiciler

Ice Cream Melt

Ice cream melting down cone.

#animation #gradient #transform

Canlı incele Yükleyiciler

Icicle Drip

Icicle dripping water droplets on a winter day.

#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

Morph Blob Loader

A gradient blob melts between organic border-radius shapes while it rotates.

#animation #gradient #transform

Canlı incele Yükleyiciler

Pilgrim Hat

Pilgrim hat with shiny buckle.

#animation #gradient #transform

Canlı incele Yükleyiciler

Rune Glow

Magical rune glowing with pulse.

#animation #shadow #filter

Canlı incele Yükleyiciler

Spark Fly

Sparks flying upward.

#animation #transform #shadow

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

Sun Rays

Sun with rotating rays around a glowing yellow center.

#animation #gradient #transform

Canlı incele Yükleyiciler

Timing Belt

Timing belt moving over gears.

#animation #transform #border

Canlı incele Yükleyiciler

Vinyl Scratch

DJ scratching vinyl record.

#animation #gradient #transform

Canlı incele Yükleyiciler

Welder Spark

Welding torch throwing bright sparks in bursts.

#animation #gradient #transform

Canlı incele Navigasyon

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

#hover #gradient #transform

Canlı incele Navigasyon

Curve Arrow Breadcrumbs

Breadcrumbs with curved arrow separators.

#hover #transform

Canlı incele Navigasyon

Icon Text Breadcrumbs

Breadcrumbs with icons and text.

Canlı incele Navigasyon

Line Separator Breadcrumbs

Breadcrumbs with vertical line separators.

#hover #transform

Canlı incele Navigasyon

Pipe Separator Breadcrumbs

Breadcrumbs with pipe separators.

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

Magnetic Pull Navbar

Links magnetically grow toward the hovered item while neighbors shrink back.

#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

Active Flip Pagination

Active page flips on Y axis.

#hover #transform #shadow

Canlı incele Navigasyon

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

#hover #animation #transform

Canlı incele Navigasyon

Square Active Tabs

Square-shaped active tab indicator.

Canlı incele Navigasyon

Thick Underline Tabs

Tabs with a thick underline indicator.

Canlı incele Navigasyon

Text Blur Focus Navbar

All links blur except the hovered one which comes into sharp focus.

Canlı incele Navigasyon

Text Reveal Mask Navbar

Hovered link text reveals through a vertical wipe mask.

Canlı incele Navigasyon

Text Slide Down Mask Navbar

Link text slides down, replaced by a duplicate from above.

Canlı incele Navigasyon

Vertical Tab Glow Active

Vertical tabs with a glowing active item casting ambient light.

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 İlerleme

Origami Cusp Progress

Eight paper facets alternate their crease direction and the five set folds carry the colour.

#origami #clip-path #flexbox

Canlı incele Kaydırıcılar

Anvil Type Size

A live specimen line grows from small to display size the moment the control is engaged.

#slider #typography #preview

Canlı incele Kaydırıcılar

Caliper Brake Bias

A vented brake-disc rail with a red centre detent and a clamp-shaped handle splitting bias.

#slider #balance #brake

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

Cove Circular Frame

A round instrument bezel with a slowly turning dashed ring around the inner rail.

#slider #circular #bezel

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 Kaydırıcılar

Willow Chunky Slider

An oversized touch target with a thick channel and a knob the size of a fingertip.

#slider #oversized #touch

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 Sekmeler

Cobalt Stepper Tabs

Numbered cobalt nodes on a rail, with the connecting line filling as you advance.

#transform #gradient #stepper

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 Sekmeler

Summit Full Width Tabs

Three edge to edge cells split the full width and the chosen one fills to the seams.

#layout #gradient #uppercase

Canlı incele Metin

Bounce Horizontal Slide

Bouncing horizontal slide motion.

#animation #transform

Canlı incele Metin

Breathing Text

Text slowly scales and glows in a calm breathing rhythm.

#animation #shadow #transform

Canlı incele Metin

Brutalist Raw

Raw brutalist text with stark black on white.

Canlı incele Metin

Burlap Coarse

Coarse burlap fabric weave.

Canlı incele Metin

Cloud Cover Grey

Overcast grey cloud cover on text.

#animation #gradient #shadow

Canlı incele Metin

Collage Cutout

Magazine cutout collage ransom-style text.

#transform #border

Canlı incele Metin

Color Blocks Three

Three vertical color blocks.

Canlı incele Metin

Constructivism Bold Red

Constructivist bold red propaganda.

Canlı incele Metin

Cosmic Nebula

Swirling nebula clouds of purple and pink within text.

#animation #gradient

Canlı incele Metin

Distortion Grit

Gritty distorted guitar text.

#animation #transform #shadow

Canlı incele Metin

Grid Dots

Evenly-spaced dot grid in monochrome.

Canlı incele Metin

Ember Glow Warm

Warm ember pulsing glow.

#animation #shadow

Canlı incele Metin

Manor Estate

Grand manor estate on text.

#animation #gradient #shadow

Canlı incele Metin

Palace Grand

Grand opulent palace gold on text.

#animation #gradient #shadow

Canlı incele Metin

Bevel Shine

Beveled highlight on glossy dimensional text.

Canlı incele Metin

Skyline Silhouette

Dark city skyline silhouette on text.

#animation #gradient #filter

Canlı incele Metin

Torch Pass

A warm torch light passes across the text.

#animation #gradient

Canlı incele Metin

Train Steam

Steam train chugging on text.

#animation #transform #shadow

Canlı incele Metin

Typewriter Old Remington

Old Remington typewriter ink.

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ı

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ı

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