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 Kayan Yazılar

Ridge Price Cut Band

A promo band where every entry strikes an old price and shouts the new one.

#marquee #price #promo

Canlı incele Kayan Yazılar

Ripple Bounce Beads

Round beads hop up and down out of phase while the whole string slides to the left.

#marquee #bounce #beads

Canlı incele Kayan Yazılar

Rivet Flight Row

Flight numbers, routes and gate states cross the panel like an airport crawl.

#marquee #flight #airport

Canlı incele Kayan Yazılar

Ruby Outline Strip

Hollow stroked words alternate with solid ones as the ruby strip cycles past.

#marquee #outline #typography

Canlı incele Kayan Yazılar

Savanna Sheen Pass

A soft gradient highlight sweeps over the rail while the caption pulses in step.

#marquee #sheen #gradient

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

Slate Vertical Feed

A stacked status list rolls upward forever inside a slate coloured window.

#marquee #vertical #list

Canlı incele Kayan Yazılar

Socket Temperature Chart

Reading columns rise then fall as the hourly temperature chart scrolls sideways.

#marquee #chart #temperature

Canlı incele Kayan Yazılar

Spindle Metric Rail

Resource gauges travel past while every fill bar keeps breathing on its own beat.

#marquee #metrics #gauge

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

Summit Side Strip

A narrow vertical rail hugs the right edge with rotated type climbing upward.

#marquee #vertical #sidebar

Canlı incele Kayan Yazılar

Sway Spin Glyphs

Every letter turns on its own vertical axis as the row of glyphs travels sideways.

#marquee #rotate #letters

Canlı incele Kayan Yazılar

Thicket Divider Run

Every item is closed by a thin upright rule, giving the run a printed masthead feel.

#marquee #divider #separator

Canlı incele Kayan Yazılar

Tide Mixed Scale

Words of three different weights and sizes share one rail for an uneven rhythm.

#marquee #typography #mixed-scale

Canlı incele Kayan Yazılar

Topaz Gradient Line

The moving caption is painted by a clipped gradient instead of a flat colour.

#marquee #gradient #background-clip

Canlı incele Kayan Yazılar

Tundra Credential Belt

Certification badges with tick marks pass by like an accreditation footer strip.

#marquee #badge #certification

Canlı incele Kayan Yazılar

Turbine Film Strip

Numbered frames run between two perforated edges that advance with the reel.

#marquee #film #perforation

Canlı incele Kayan Yazılar

Valley Sponsor Roster

Numbered roster entries flow past like a sponsor wall or a team credit list.

#marquee #roster #sponsors

Canlı incele Kayan Yazılar

Valve Crypto Tape

Round token badges lead each pair as the quote tape drifts across a terminal strip.

#marquee #crypto #ticker

Canlı incele Kayan Yazılar

Verge Counter Bed

A field of dots creeps to the right underneath a caption that travels to the left.

#marquee #background #opposite

Canlı incele Kayan Yazılar

Wander Shadow Lag

A coloured copy of the caption runs a touch slower, so its shadow keeps sliding off.

#marquee #shadow #offset

Canlı incele Kayan Yazılar

Willow Grid Floor

The caption rides over a fine engineering grid that pans slowly the other way.

#marquee #grid #parallax

Canlı incele Kayan Yazılar

Wisp Edge Markers

Two triangular pointers guard the ends of the window and breathe toward the centre.

#marquee #pointer #triangle

Canlı incele Kayan Yazılar

Zenith Cross Lap

Two oversized translucent lines overlap vertically and slide through one another.

#marquee #overlap #opposite

Canlı incele Navigasyon

3D Perspective Navbar

Navbar with 3D hover lift and perspective transform.

#hover #transform #shadow

Canlı incele Navigasyon

3D Tilt X Navbar

Active link tilts on the X-axis with deep perspective.

#hover #transform #shadow

Canlı incele Navigasyon

3D Tilt XY Navbar

Active link tilts diagonally on both X and Y axes.

#hover #transform #shadow

Canlı incele Navigasyon

3D Tilt Y Navbar

Active link tilts on the Y-axis with deep perspective.

#hover #transform #shadow

Canlı incele Navigasyon

Arrow 3D Perspective Navbar

Nav with 3D perspective arrow-shaped active indicator.

#hover #transform #shadow

Canlı incele Navigasyon

Arrow Asterisk Spin Navbar

Nav with spinning asterisk arrow accent on the active item.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Bounce Drop Navbar

Nav with arrow indicators that bounce-drop on hover.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Chevron Point Navbar

Nav with chevron-pointed active indicators.

#hover #transform

Canlı incele Navigasyon

Arrow Circle Dot Navbar

Nav with circular dot arrow indicators on active items.

#hover #shadow #border

Canlı incele Navigasyon

Arrow Cross Mark Navbar

Nav with cross-mark arrow accent on the active item.

#hover #transform

Canlı incele Navigasyon

Arrow Diagonal Travel Navbar

Nav links travel diagonally on hover with arrow accents.

#hover #transform

Canlı incele Navigasyon

Arrow Diamond Shape Navbar

Nav with diamond-shaped arrow indicators on active items.

Canlı incele Navigasyon

Arrow Double Pointer Navbar

Nav with double-pointer arrow indicators on the active item.

Canlı incele Navigasyon

Arrow Filled Bg Navbar

Nav with arrow-shaped filled background on the active item.

Canlı incele Navigasyon

Arrow Flip 3D Navbar

Nav arrow indicators flip in 3D on hover.

#hover #transform #3d

Canlı incele Navigasyon

Arrow Floating Bob Navbar

Nav links with floating arrow indicators that bob up and down.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Flow Down Drop Navbar

Vertical nav with arrow indicators flowing downward.

Canlı incele Navigasyon

Arrow Flow Left Slide Navbar

Nav with arrow-shaped active indicator sliding left on hover.

Canlı incele Navigasyon

Arrow Flow Right Slide Navbar

Nav with arrow-shaped active indicator sliding right on hover.

Canlı incele Navigasyon

Arrow Flow Up Rise Navbar

Vertical nav with arrow indicators rising upward.

Canlı incele Navigasyon

Arrow Glow Active Navbar

Nav with glowing arrow accent on the active item.

Canlı incele Navigasyon

Arrow Gradient Flow Navbar

Nav with gradient animated arrow indicators.

#hover #animation #gradient

Canlı incele Navigasyon

Arrow Grow Expand Navbar

Nav arrow indicators grow and expand on hover.

#hover #transform

Canlı incele Navigasyon

Arrow Heart Beat Navbar

Nav with heart-beat arrow accent on the active item.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Neon Active Navbar

Nav with neon glowing arrow on the active item.

#hover #animation #shadow

Canlı incele Navigasyon

Arrow Outline Draw Navbar

Nav with arrow outline drawn on the active item.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Pentagon Shape Navbar

Nav links shaped as pentagons with arrow flow.

Canlı incele Navigasyon

Arrow Pill Shape Navbar

Nav with pill-shaped arrow indicators on active items.

Canlı incele Navigasyon

Arrow Pulse Throb Navbar

Nav arrow indicators pulse and throb on the active item.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Rotate Spin Navbar

Nav arrow indicators rotate-spin when hovered.

#hover #transform

Canlı incele Navigasyon

Arrow Shrink Compress Navbar

Nav links compress and shrink with arrow accent on hover.

#hover #transform

Canlı incele Navigasyon

Arrow Slide Track Navbar

Nav links slide along a track with arrow indicator.

#hover #transform

Canlı incele Navigasyon

Arrow Square Dot Navbar

Nav with square dot arrow indicators on active items.

#hover #shadow #border

Canlı incele Navigasyon

Arrow Star Burst Navbar

Nav with star-burst arrow accent on the active item.

#hover #transform

Canlı incele Navigasyon

Arrow Triangle Point Navbar

Nav with triangle-pointed active indicators.

Canlı incele Navigasyon

Arrow Triple Stack Navbar

Nav with triple-stacked arrow indicators on the active item.

#hover #transform

Canlı incele Navigasyon

Arrow Wave Flow Navbar

Nav with wavy arrow flow separators between items.

#hover #animation #transform

Canlı incele Navigasyon

Arrow Zigzag Flow Navbar

Nav with zigzag-shaped arrow flow separators.

#hover #animation #transform

Canlı incele Navigasyon

Aurora Background Navbar

Navbar with aurora-like animated gradient blobs.

#hover #animation #gradient

Canlı incele Navigasyon

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

#hover #gradient #shadow

Canlı incele Navigasyon

Bob Buoyant Navbar

Links bob up and down buoyantly on hover.

#hover #animation #gradient

Canlı incele Navigasyon

Bordered Bottom Navbar

Navbar with thick gradient bottom border.

#hover #gradient #shadow

Canlı incele Navigasyon

Bordered Top Navbar

Navbar with thick gradient top border.

#hover #gradient #shadow

Canlı incele Navigasyon

Fixed Bottom Nav

Fixed bottom navigation bar with icons.

#hover #transform

Canlı incele Navigasyon

Glass Bottom Nav

Glassmorphism bottom navigation.

#hover #shadow #border

Canlı incele Navigasyon

Glow Bottom Nav

Bottom nav with glowing active item.

#hover #shadow #border

Canlı incele Navigasyon

Gradient Bottom Nav

Bottom nav with gradient active icon.

#hover #gradient #transform

Canlı incele Navigasyon

Bounce Drop Navbar

Hovered links drop and bounce in from above with an overshoot.

#hover #transform

Canlı incele Navigasyon

Breathe Glow Navbar

Active link breathes with a soft expanding glow halo.

#hover #animation #shadow

Canlı incele Navigasyon

Brutalist Navbar

Raw brutalist navbar with thick borders and offset shadow.

#hover #transform #shadow

Canlı incele Navigasyon

3D Rotate Hamburger

Hamburger with full 3D rotation on hover.

#hover #transform #border

Canlı incele Navigasyon

Bounce Hamburger

Hamburger that bounces on hover.

#hover #animation #transform

Canlı incele Navigasyon

Morph to Arrow Hamburger

Hamburger that morphs into a left arrow.

#hover #transform #border

Canlı incele Navigasyon

Morph to X Hamburger

Hamburger menu icon that morphs to X on hover.

#hover #transform #border

Canlı incele Navigasyon

Rotate Hamburger

Hamburger with rotating lines on hover.

#hover #transform #border

Canlı incele Navigasyon

Square Hamburger

Hamburger inside a square that morphs on hover.

#hover #transform #border

Canlı incele Navigasyon

To Arrow Hamburger

Hamburger that becomes an arrow on hover.

#hover #transform #border

Canlı incele Navigasyon

To Dots Hamburger

Hamburger that becomes 3 vertical dots on hover.

#hover #transform #border

Canlı incele Navigasyon

To Grid Hamburger

Hamburger that becomes a 3x3 grid of dots on hover.

Canlı incele Navigasyon

Center Logo Navbar

Navbar with the logo centered and split links.

#hover #transform #border

Canlı incele Navigasyon

Color Ripple Hover Navbar

Color ripples outward from each link on hover with a radial gradient.

#hover #gradient #transform

Canlı incele Navigasyon

Keyboard Command Palette

Command palette where each item shows its keyboard shortcut hint.

#hover #shadow #border

Canlı incele Navigasyon

Recent Commands Palette

Palette grouping commands into Recent and All sections.

#hover #transform #shadow

Canlı incele Navigasyon

Search Command Palette

Command palette with a search input and filtered command rows.

#hover #shadow #border

Canlı incele Navigasyon

Coupon Clip Corner Nav

Nav items styled as coupons with clipped circular corners.

#hover #gradient #transform

Canlı incele Navigasyon

Filled Arrow Breadcrumbs

Breadcrumbs styled as filled arrow shapes.

#hover #gradient

Canlı incele Navigasyon

Arrow Flow Breadcrumbs

Breadcrumbs with arrow-shaped separators.

#hover #gradient

Canlı incele Navigasyon

Outline Arrow Breadcrumbs

Breadcrumbs with outlined arrow shapes.