En popüler CSS efektleri

#animation #border #transform

Canlı incele Yükleyiciler

Violin Bow

Violin bow drawing across strings back and forth.

#animation #gradient

Canlı incele Yükleyiciler

Vortex Spiral

Four nested purple rings spiraling inward and fading to nothing.

Canlı incele Yükleyiciler

Water Clock

Ancient water clock filling.

#animation #gradient

Canlı incele Yükleyiciler

Wind Gust

Wind gust lines blowing.

Canlı incele Yükleyiciler

Wine Pour

Wine pouring into glass.

Canlı incele Yükleyiciler

Xylophone Mallet

Mallet striking xylophone bars.

#animation #gradient #filter

Canlı incele Yükleyiciler

Ziggurat Tier

Ziggurat with stacked tiers.

Canlı incele Yükleyiciler

Zombie Shuffle

Zombie shuffling across screen.

#modal #light-leak #stagger

Canlı incele Modallar

Chalk Note Modal

A dashed sticky note swings in at an angle and straightens onto a pin.

#modal #rotate #dashed

Canlı incele Modallar

Echo Invite Modal

Two offset outline echoes chase the invitation card into place while a warm light leak sweeps across it.

Canlı incele Modallar

Halo Weather Modal

A weather detail sheet fades up as a soft sun disc rises behind it and its halo keeps breathing.

#modal #aura #glow

Canlı incele Modallar

Lagoon QR Modal

A pass panel flips on its vertical axis to reveal a scannable code block and claim line.

#modal #qr #flip

Canlı incele Modallar

Lapis Stack Modal

Three layered sheets fan out in sequence so the front dialog lands on a deck.

#modal #stack #stagger

Canlı incele Modallar

Lull Stock Modal

A folded origami stock alert falls slowly through the scene, drifting sideways before it settles flat.

#modal #origami #keyframes

Canlı incele Modallar

Oasis Rating Modal

A feedback card spins as it slides across the scene carrying a star row and a note field.

#modal #rating #rotate

Canlı incele Modallar

Shaft Signature Modal

A signing pad expands vertically out of a hairline and then draws the stroke by itself.

#modal #svg #keyframes

Canlı incele Modallar

Spindle Variant Modal

A size and colour picker spins clockwise into place from a tiny rotated seed.

#modal #rotate #radio

Canlı incele Modallar

Summit Map Modal

A map preview zooms out of the pin it belongs to while a signal ring keeps pulsing.

#modal #map #keyframes

Canlı incele Modallar

Wisp Tag Modal

A tagging panel condenses out of a blurred wisp while mist bands keep drifting across the scene.

#modal #mist #blur

Canlı incele Kayan Yazılar

Amber Hover Hold

The amber capsule keeps looping until the pointer rests on it, then freezes.

#marquee #hover #pause

Canlı incele Kayan Yazılar

Canyon LED Matrix

A dot mask sits over the caption so the line reads as an amber LED matrix panel.

#marquee #led #dot-matrix

Canlı incele Kayan Yazılar

Flange Plate Line

Registration plates with a blue country band file past a workshop wall rail.

#marquee #plate #vehicle

Canlı incele Kayan Yazılar

Obsidian Credits Roll

Role and name pairs scroll upward like the closing credits of a short film.

#marquee #vertical #credits

Canlı incele Kayan Yazılar

Opal Trio Speed

Three rows share one keyframe but run at different durations, building depth.

#marquee #three-rows #speed

Canlı incele Kayan Yazılar

Shaft Chain Drive

Interlocking links are pulled along by a toothed sprocket turning at the left end.

#marquee #chain #sprocket

Canlı incele Kayan Yazılar

Spiral Bullet List

A real list scrolls sideways and each square marker turns a quarter on every beat.

#marquee #list #bullet

Canlı incele Kayan Yazılar

Tether Connector Run

Pinned plugs linked by short cable stubs march past with their contacts blinking.

#marquee #connector #cable

Canlı incele Kayan Yazılar

Vault Scale Breath

Words swell and shrink on their own beat, so the rail seems to breathe as it moves.

#marquee #scale #breathe

Canlı incele Navigasyon

Circle Hamburger

Hamburger inside a circle that morphs on hover.

Canlı incele Navigasyon

Flip Hamburger

Hamburger that flips on Y axis.

Canlı incele Navigasyon

Spin Hamburger

Hamburger that spins 180 degrees on hover.

Canlı incele Navigasyon

To Close Hamburger

Hamburger that becomes an X close icon on hover.

Canlı incele Navigasyon

To Minus Hamburger

Hamburger that becomes a minus line on hover.

Canlı incele Navigasyon

To Plus Hamburger

Hamburger that becomes a plus sign on hover.

Canlı incele Navigasyon

Claymorphism Navbar

Soft clay-style navbar with rounded pill links.

Canlı incele Navigasyon

Fuzzy Match Palette

Command palette that highlights matched letters in the query string.

#hover #animation #transform

Canlı incele Navigasyon

Animated Arrow Breadcrumbs

Breadcrumbs with animated moving arrows.

Canlı incele Navigasyon

Chevron Outline Breadcrumbs

Breadcrumbs with outlined chevron shapes.

Canlı incele Navigasyon

Curve Line Breadcrumbs

Breadcrumbs with curved SVG-like line separators.

Canlı incele Navigasyon

Dashed Trail Breadcrumbs

Breadcrumbs with dashed connecting lines.

Canlı incele Navigasyon

Greater Than Breadcrumbs

Breadcrumbs with > separators.

#hover

Canlı incele Navigasyon

Hover Glow Breadcrumbs

Breadcrumbs with glow on hover.

Canlı incele Navigasyon

Hover Grow Breadcrumbs

Breadcrumbs that grow on hover.

Canlı incele Navigasyon

Hover Shift Breadcrumbs

Breadcrumbs that shift right on hover.

Canlı incele Navigasyon

Neon Separator Breadcrumbs

Dark mode breadcrumbs with neon separators.

Canlı incele Navigasyon

Progress Bar Breadcrumbs

Breadcrumbs with a progress bar underneath.

#hover #gradient

Canlı incele Navigasyon

Text Only Breadcrumbs

Minimal text-only breadcrumbs.

#hover

Canlı incele Navigasyon

Triangle Tip Breadcrumbs

Breadcrumbs with triangle pointed tips.

Canlı incele Navigasyon

Zigzag Trail Breadcrumbs

Breadcrumbs with zigzag pattern separators.

Canlı incele Navigasyon

Curtain Split Reveal Nav

Two curtains split apart horizontally to reveal the nav links.

Canlı incele Navigasyon

Curved Bottom Navbar

Navbar with a curved bottom edge using border-radius.

Canlı incele Navigasyon

Dark Minimal Navbar

Minimal dark navbar with subtle hover underlines.

Canlı incele Navigasyon

Deep Shadow Navbar

Navbar with deep layered shadow for elevation.

Canlı incele Navigasyon

Horizontal Top Dot Nav

Horizontal dot navigation at top.

Canlı incele Navigasyon

Accordion Collapse Drawer Navbar

Drawer with collapsible accordion groups using details/summary.

#hover

Canlı incele Navigasyon

Fixed Edge Drawer Navbar

Drawer fixed to the viewport edge with a sharp vertical layout.

Canlı incele Navigasyon

Glass Panel Drawer Navbar

Drawer with frosted glass panel styling over a colored background.

Canlı incele Navigasyon

Gradient Panel Drawer Navbar

Drawer with a gradient panel background and active indicator.

#hover #gradient #border

Canlı incele Navigasyon

Light Panel Drawer Navbar

Light panel drawer with clean card-style spacing.

#hover #animation #border

Canlı incele Navigasyon

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

Canlı incele Navigasyon

Push Content Right Drawer Navbar

Right drawer pushes the main content leftward when opening.

#hover #animation #border

Canlı incele Navigasyon

Rounded Pill Drawer Navbar

Drawer with rounded pill-style links and soft pink palette.

Canlı incele Navigasyon

Sticky Side Drawer Navbar

Sticky left drawer that stays in place during scroll.

Canlı incele Navigasyon

Tree Nested Drawer Navbar

Vertical drawer with nested tree-style sub-links indentation.

Canlı incele Navigasyon

Elastic Snap Navbar

Links snap up elastically on hover and settle with a bounce.

Canlı incele Navigasyon

Forest Green Navbar

Forest green navbar with earthy tones.

#hover #gradient #shadow

Canlı incele Navigasyon

Glass Dark Navbar

Dark glass navbar with white border highlight.

#hover #animation #shadow

Canlı incele Navigasyon

Glass Tint Navbar

Glass navbar with colored tint overlay.

#hover #gradient #shadow

Canlı incele Navigasyon

Glow Line Navbar

Navbar with neon glowing line under active link.

Canlı incele Navigasyon

Gradient Flow Navbar

Navbar with an animated gradient background flowing across links.

#hover #animation #gradient

Canlı incele Navigasyon

3D Icon Nav

3D extruded icon navigation.

#hover #animation #transform

Canlı incele Navigasyon

Jello Wiggle Navbar

Links wiggle like jello with a skew-based animation on hover.

Canlı incele Navigasyon

Liquid Morph Tab Navbar

Active tab morphs between links like a liquid blob.

Canlı incele Navigasyon

Cascading Menu

Multi-level cascading dropdown menu.

Canlı incele Navigasyon

Vertical List Menu

Simple vertical list menu.

#hover #gradient #shadow

Canlı incele Navigasyon

Radial Burst Menu

Items burst outward radially from a center trigger with staggered timing.

Canlı incele Navigasyon

3D Pagination

Pagination with 3D extruded active button.

Canlı incele Navigasyon

Active Glow Pagination

Active page has glowing aura.

Canlı incele Navigasyon

Arrow Circle Pagination

Pagination with circular arrow buttons.

Canlı incele Navigasyon

Number Glow Pagination

Active number has glowing aura.

Canlı incele Navigasyon

Step Bar Fill Nav

Horizontal stepper where each segment fills a progress bar on hover.

Canlı incele Navigasyon

Underline Segmented Control

Segmented control with an underline indicator that slides between items.

Canlı incele Navigasyon

Floating Sidebar

Floating detached sidebar with deep shadow.

Canlı incele Navigasyon

Glass Sidebar

Glassmorphism sidebar with blur.

Canlı incele Navigasyon

Expanding Sidebar Rail

A narrow icon rail widens on hover and slides the labels out beside each icon.

Canlı incele Navigasyon

Slant Perspective 3D Navbar

Nav with a perspective tilt creating a 3D slanted look.

Canlı incele Navigasyon

Split Divider Line Navbar

Nav links separated by thin vertical divider lines.

#hover #animation #gradient

Canlı incele Navigasyon

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

Canlı incele Navigasyon

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

Canlı incele Navigasyon

Square Step Indicator

Step indicator with square markers.

Canlı incele Navigasyon

Sticky Note Curl Nav

Nav items styled as sticky notes with curling corners on hover.