Ö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

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Canlı incele Onay Kutuları

Church Toggle

A church glows softly white when checked.

#transform #shadow #filter

Canlı incele Onay Kutuları

Power On Toggle

A power-symbol checkbox that glows green when powered on, dark when off.

#shadow #border #transform

Canlı incele Kartlar

Bronze Achievement Card

Bronze-tier achievement with progress and reward.

#gradient #shadow #border

Canlı incele Arka Planlar

Deep Abyss

Lightless ocean abyss glows faintly with bioluminescent specks.

#animation #gradient #transform

Canlı incele Arka Planlar

De Stijl Mondrian

Mondrian-style primary color blocks with bold black lines.

#animation #gradient #filter

Canlı incele Butonlar

Alpine Peak

Snow-capped alpine mountain button.

#hover #gradient #shadow

Canlı incele Hover

3D Parallax Tilt

Layers shift in 3D based on cursor position for a parallax depth effect.

#gradient #3d #shadow

Canlı incele Kartlar

Alarm Card

Alarm card with a clock face, set time, and toggle indicator.

#gradient #transform #shadow

Canlı incele Onay Kutuları

Laptop Work Toggle

A laptop glows blue when checked.

#transform #shadow #filter

Canlı incele Butonlar

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Canlı incele Butonlar

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Canlı incele Hover

3D Tilt Follow

Element tilts in 3D following cursor on hover.

#gradient #transform

Canlı incele Navigasyon

Floating Bottom Nav

Floating bottom navigation with pill design.

#hover #gradient #shadow

Canlı incele Hover

Orbit Spiral

Spiral inward orbit on hover.

#hover #animation #transform

Canlı incele Yükleyiciler

Baguette Slice

Baguette being sliced.

#animation #gradient #shadow

Canlı incele Yükleyiciler

Black Hole

A swirling multicolor accretion disk being consumed by a dark core.

#gradient #animation #shadow

Canlı incele Kartlar

Character Sheet Card

RPG character sheet card with stats, class, and level.

#gradient #shadow #border

Canlı incele Navigasyon

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

#hover #animation #shadow

Canlı incele Anahtarlar

Active / Inactive

Pulsing green dot signals active vs a still grey one.

#animation #transform #shadow

Canlı incele Arka Planlar

Aurora Curtain

Vertical bands of aurora light ripple like a hanging curtain.

#animation #gradient #transform

Canlı incele Butonlar

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Canlı incele Butonlar

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Canlı incele Kartlar

Archer Card

Archer card with bow icon and accuracy stat.

#gradient #shadow #border

Canlı incele Hover

Property Trace Frame

Hover starts a registered angle animating, so the gradient outline runs the perimeter.

#hover #animation #gradient

Canlı incele Navigasyon

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

#hover #transform #shadow

Canlı incele Anahtarlar

Hot / Cold

Flame turns to a snowflake as the temperature flips.

#gradient #transform #shadow

Canlı incele Arka Planlar

Spiral Galaxy

A swirling spiral galaxy of stars rotates in deep space.

#gradient #animation #border

Canlı incele Hover

Quiver Hard

Hard intense quiver on hover.

#hover #animation #transform

Canlı incele Yükleyiciler

Wormhole Tunnel

Traveling through a wormhole tunnel.

#animation #gradient #transform

Canlı incele Navigasyon

3D Chevron Breadcrumbs

Breadcrumbs with 3D chevron separators.

#hover #gradient #transform

Canlı incele Sekmeler

Savanna Divided Tabs

Hairline dividers separate the tabs and quietly step aside around the active one.

#border #layout #animation

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 Anahtarlar

Arrow / Dots

Solid arrow dissolves into a row of dots.

#transform #shadow

Canlı incele Anahtarlar

Frozen / Melted

Frozen ice knob melts into a puddle shape on the cyan track.

#transform #shadow

Canlı incele Rozetler

Action Copy Badge

Copy action badge with duplicate-page glyph and slate tone.

#gradient #shadow #border

Canlı incele Arka Planlar

Chrome Bubble

Liquid chrome bubble reflecting environment with shifting glare.

#animation #gradient #transform

Canlı incele Onay Kutuları

3D Y-Axis Flip

A 3D flip on the Y axis revealing a checkmark on the back face.

#transform #border #3d

Canlı incele Formlar

Midnight Background Input

Deep midnight blue gradient background.

#gradient #shadow #border

Canlı incele Hover

Aperture Iris Close

A dark circular iris contracts over the panel like a camera aperture closing on hover.

#gradient #hover #border

Canlı incele Yükleyiciler

7 Segment Display

7-segment display counting.

#animation #shadow

Canlı incele Navigasyon

Color Shift Navbar

Navbar with hue-shifting links on hover.

#hover #animation #gradient

Canlı incele Sekmeler

Marble Topline Tabs

A veined marble bar with the indicator on its top edge and a popping panel.

#gradient #transform #border

Canlı incele Metin

Magenta Pop

Bold magenta text with a vibrant electric pop.

#shadow

Canlı incele İpuçları

3D Fold Origami

Tooltip that unfolds in 3D like an origami paper fold.

#hover #transform #border

Canlı incele Anahtarlar

Equalizer Wave

Flat bars bounce into an animated equalizer.

#animation #transform #shadow

Canlı incele Uyarılar

Ivory Sticker Alert

A taped paper sticker sways from its top edge like a note pinned to the wall.

#sticker #note #tilt

Canlı incele Arka Planlar

Beacon Sweep

A rotating beacon casts a sweeping cone of warning light.

#animation #gradient #transform

Canlı incele Arka Planlar

Brown Noise

Warm brown noise drifting like deep ambient rumble.

#animation #gradient #filter

Canlı incele Arka Planlar

Baroque Damask

Opulent baroque damask with gilded floral flourishes.

#animation #gradient #filter

Canlı incele Arka Planlar

Koch Snowflake

Koch snowflake fractal with infinite crystalline edges.

#animation #gradient #transform

Canlı incele Arka Planlar

Thin Film Interference

Soap-film thin-film interference patterns shifting bands.

#animation #gradient #transform

Canlı incele Butonlar

Barn Owl

Soft tawny owl-feather pattern.

#hover #gradient #shadow

Canlı incele Butonlar

Binary Stream Button

Matrix-style button with falling binary digits in the background.

#hover #animation #transform

Canlı incele Butonlar

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

#animation #hover #shadow

Canlı incele Onay Kutuları

3D Press Check

A chunky 3D button-style checkbox that presses down and turns green when checked.

#3d #shadow #border

Canlı incele Formlar

Border Draw Radio

Radio card with animated border that draws in when selected.

#gradient #transform #border

Canlı incele Hover

Blink Swap

Content blinks rapidly and swaps text on each blink cycle on hover.

#animation #hover #border

Canlı incele Hover

Duotone Magenta

Magenta-cyan duotone filter on hover.

#hover #transform #filter

Canlı incele Hover

Neon Shadow Text

Neon glow shadow on text on hover.

#hover #shadow

Canlı incele Yükleyiciler

Arc Sweep

Arc sweeping around a center point.

#animation #transform #border

Canlı incele Yükleyiciler

Billiards Cue

Pool cue striking ball.

#animation #gradient #transform

Canlı incele Kayan Yazılar

Kiln Equalizer Flow

A wall of level bars pumps out of phase while the whole band scrolls to the left.

#marquee #equalizer #bars

Canlı incele Navigasyon

Arrow Curve Bend Navbar

Nav with curve-bent arrow separators between items.

#hover

Canlı incele Navigasyon

Elevated Card Navbar

Navbar styled as an elevated card with deep shadow.

#hover #shadow

Canlı incele Navigasyon

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #gradient #transform

Canlı incele İlerleme

Neon Halo Progress

A vaporwave ring in magenta and cyan wraps a slatted retro sun that carries the percentage.

#vaporwave #conic-gradient #mask

Canlı incele Kaydırıcılar

Bloom Vapor Slider

A striped sunset disc rises behind chrome lettering while a neon grid runs to the horizon.

#slider #vaporwave #gradient

Canlı incele İpuçları

3D Cube Spin

Tooltip that spins in 3D like a tumbling cube above the trigger.

#hover #transform #border

Canlı incele İpuçları

Square Arrow Left

Tooltip with a sharp square-cut arrow pointing right.

#hover #transform

Canlı incele İpuçları

Snow Winter

Winter-themed tooltip with falling snow pattern decoration.

#hover #gradient #transform

Canlı incele Zaman Çizelgeleri

Cusp Roadmap Timeline

Quarters read as folded paper bands, each creased down the middle with a lifted corner.

#gradient #hover #origami

Canlı incele Anahtarlar

Crimson Flame

Burning crimson flame with flickering glow.

#gradient #transform #shadow

Canlı incele Anahtarlar

Terminal Prompt

Blinking cursor at a shell prompt toggles to a check output.

#animation #transform #shadow

Canlı incele Anahtarlar

Tether / Untether Device

Phone knob releases its tether cable on toggle.

#transform #shadow

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 Uyarılar

Ripple Copy Alert

A small clipboard toast that lifts into view and sends a ripple out of the copy glyph.

#clipboard #copy #ripple

Canlı incele Uyarılar

Tether Bulk Alert

A bulk job summary whose ratio bar splits outward into imported and failed portions.

#bulk #summary #ratio

Canlı incele Rozetler

Common Badge

Common achievement badge with gray gradient.

#gradient #transform #shadow

Canlı incele Rozetler

Cloud Netlify Badge

Netlify cloud badge with teal-teal gradient styling.

#gradient #shadow #border

Canlı incele Rozetler

Solid Sky Pill

Sky blue pill with white text.

Canlı incele Rozetler

Solid Teal Pill

Teal pill badge with deep sea tone.

Canlı incele Rozetler

Iridescent Glass Badge

Glass badge with iridescent multi-color shimmer.

#gradient #shadow #border

Canlı incele Rozetler

Bronze Award Ribbon

Bronze award ribbon with green tails.

#gradient #transform #shadow

Canlı incele Rozetler

Space Planet Badge

Planet badge with orbital ring around the text.

#gradient #transform #shadow

Canlı incele Arka Planlar

Abalone Nacre

Abalone shell nacre with shifting iridescent colors.

#animation #gradient #transform

Canlı incele Arka Planlar

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Canlı incele Arka Planlar

Wind Chime Spin

Tubular wind chimes sway and ring in a gentle breeze.

#animation #gradient #transform

Canlı incele Arka Planlar

Conic Gradient Spin

A vivid conic gradient rotates behind a soft mask for a hypnotic wheel of color.

#gradient #animation #border

Canlı incele Arka Planlar

Gradient Shift

A wide multi-stop gradient that continuously cycles its position for a calm flow.

#gradient #animation #border

Canlı incele Arka Planlar

Animated Ocean Waves

Layered SVG wave shapes ripple across a calm ocean horizon.

#gradient #animation #border

Canlı incele Butonlar

Antique Brass

Tarnished antique brass with verdigris spots.

#hover #gradient #shadow

Canlı incele Butonlar

Ceramic Glaze

Glossy ceramic with speckled glaze.

#hover #gradient #transform

En çok incelenen efektler

Kategoriye göre gez

Popüler etiketler