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 Navigasyon

Flip Hamburger

Hamburger that flips on Y axis.

#hover #transform #border

Canlı incele Navigasyon

Spin Hamburger

Hamburger that spins 180 degrees on hover.

#hover #transform #border

Canlı incele Navigasyon

To Close Hamburger

Hamburger that becomes an X close icon on hover.

#hover #transform #border

Canlı incele Navigasyon

To Minus Hamburger

Hamburger that becomes a minus line on hover.

#hover #transform #border

Canlı incele Navigasyon

To Plus Hamburger

Hamburger that becomes a plus sign on hover.

#hover #transform #border

Canlı incele Navigasyon

Claymorphism Navbar

Soft clay-style navbar with rounded pill links.

#hover #transform #shadow

Canlı incele Navigasyon

Fuzzy Match Palette

Command palette that highlights matched letters in the query string.

Canlı incele Navigasyon

Animated Arrow Breadcrumbs

Breadcrumbs with animated moving arrows.

#hover #animation #transform

Canlı incele Navigasyon

Chevron Outline Breadcrumbs

Breadcrumbs with outlined chevron shapes.

Canlı incele Navigasyon

Curve Line Breadcrumbs

Breadcrumbs with curved SVG-like line separators.

#hover #transform

Canlı incele Navigasyon

Dashed Trail Breadcrumbs

Breadcrumbs with dashed connecting lines.

#hover #transform #border

Canlı incele Navigasyon

Greater Than Breadcrumbs

Breadcrumbs with > separators.

Canlı incele Navigasyon

Hover Glow Breadcrumbs

Breadcrumbs with glow on hover.

Canlı incele Navigasyon

Hover Grow Breadcrumbs

Breadcrumbs that grow on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Hover Shift Breadcrumbs

Breadcrumbs that shift right on hover.

#hover #transform

Canlı incele Navigasyon

Neon Separator Breadcrumbs

Dark mode breadcrumbs with neon separators.

#hover #transform #shadow

Canlı incele Navigasyon

Progress Bar Breadcrumbs

Breadcrumbs with a progress bar underneath.

#hover #gradient

Canlı incele Navigasyon

Text Only Breadcrumbs

Minimal text-only breadcrumbs.

Canlı incele Navigasyon

Triangle Tip Breadcrumbs

Breadcrumbs with triangle pointed tips.

#hover #gradient #transform

Canlı incele Navigasyon

Zigzag Trail Breadcrumbs

Breadcrumbs with zigzag pattern separators.

#hover #transform

Canlı incele Navigasyon

Curtain Split Reveal Nav

Two curtains split apart horizontally to reveal the nav links.

#hover #gradient #transform

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.

#hover #transform #border

Canlı incele Navigasyon

Deep Shadow Navbar

Navbar with deep layered shadow for elevation.

#hover #transform #shadow

Canlı incele Navigasyon

Horizontal Top Dot Nav

Horizontal dot navigation at top.

#hover #transform #shadow

Canlı incele Navigasyon

Accordion Collapse Drawer Navbar

Drawer with collapsible accordion groups using details/summary.

Canlı incele Navigasyon

Fixed Edge Drawer Navbar

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

#hover #transform #border

Canlı incele Navigasyon

Glass Panel Drawer Navbar

Drawer with frosted glass panel styling over a colored background.

#hover #shadow #border

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 #shadow #border

Canlı incele Navigasyon

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

#hover #animation #border

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.

#hover #transform #shadow

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.

#hover #transform

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 #shadow #border

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.

#hover #animation #shadow

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 #gradient #transform

Canlı incele Navigasyon

Jello Wiggle Navbar

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

#hover #animation #transform

Canlı incele Navigasyon

Liquid Morph Tab Navbar

Active tab morphs between links like a liquid blob.

Canlı incele Navigasyon

3D Pagination

Pagination with 3D extruded active button.

#hover #transform #shadow

Canlı incele Navigasyon

Active Glow Pagination

Active page has glowing aura.

#hover #shadow #border

Canlı incele Navigasyon

Arrow Circle Pagination

Pagination with circular arrow buttons.

#hover #transform

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.

#hover #gradient #transform

Canlı incele Navigasyon

Underline Segmented Control

Segmented control with an underline indicator that slides between items.

#hover #transform #border

Canlı incele Navigasyon

Slant Perspective 3D Navbar

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

#hover #transform #shadow

Canlı incele Navigasyon

Split Divider Line Navbar

Nav links separated by thin vertical divider lines.

Canlı incele Navigasyon

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

#hover #animation #gradient

Canlı incele Navigasyon

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

#hover #transform #shadow

Canlı incele Navigasyon

Square Step Indicator

Step indicator with square markers.

#hover #transform

Canlı incele Navigasyon

Sticky Note Curl Nav

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

#hover #gradient #transform

Canlı incele Navigasyon

Pentagon Background Tabs

Tabs with polygon clip-path background morph.

#hover #gradient

Canlı incele Navigasyon

Flip Card Tabs

Tabs that flip like cards revealing back face.

#hover #gradient #transform

Canlı incele Navigasyon

Morph Square Tabs

Active tab morphs into a square shape.

Canlı incele Navigasyon

Morph Triangle Tabs

Active tab morphs with triangle clip-path.

#hover #gradient

Canlı incele Navigasyon

Neon Active Tabs

Neon glowing active tab indicator.

#hover #transform #shadow

Canlı incele Navigasyon

Pill Bounce Tabs

Pill tabs that bounce into place on active.

#hover #transform #shadow

Canlı incele Navigasyon

Pill Morph Tabs

Tabs that morph into pill shape on active.

Canlı incele Navigasyon

Segmented Control Tabs

iOS-style segmented control tabs.

Canlı incele Navigasyon

Top Border Tabs

Tabs with active top border indicator.

Canlı incele Navigasyon

Underline Grow Tabs

Tabs with underline that grows from left on active.

Canlı incele Navigasyon

Taffy Pull Navbar

Links stretch like taffy when hovered, with a sticky transition.

#hover #transform

Canlı incele Navigasyon

Text Cinematic Glow Navbar

Active link has a wide cinematic soft-glow halo behind the text.

#hover #gradient #shadow

Canlı incele Navigasyon

Text Glitch Hover Navbar

Hovered links glitch with a split-color RGB shift effect.

#hover #animation #shadow

Canlı incele Navigasyon

Text Glow Pulse Link Navbar

Each link has a pulsing text glow that intensifies on hover.

#hover #animation #shadow

Canlı incele Navigasyon

Text Shadow Dance Navbar

Hovered links perform a layered text-shadow dance animation.

#hover #animation #shadow

Canlı incele Navigasyon

Uppercase Grow Navbar

Hovered link transforms to uppercase with smooth spacing growth.

#hover #transform #shadow

Canlı incele Navigasyon

3D Tilt Hover Navbar

Each link tilts in 3D space responding to hover with depth perspective.

#hover #gradient #transform

Canlı incele Navigasyon

Transparent Overlay Navbar

Transparent navbar that turns solid on hover.

Canlı incele Navigasyon

Chevron Collapsible Treeview

Tree menu where chevrons rotate as the group expands on hover.

#hover #transform

Canlı incele Navigasyon

Connector Line Treeview

Tree menu with L-shaped connector lines linking parents to children.

#hover #transform #border

Canlı incele Navigasyon

Folder Expand Treeview

Tree menu where folder groups expand their children on hover.

Canlı incele Navigasyon

Vertical Tab Right Arrow Pointer

Vertical tabs with a right-pointing arrow on the active item.

#hover #transform #border

Canlı incele Navigasyon

Vertical Tab Left Border Active

Vertical tabs with a glowing left border on the active item.

#hover #shadow #border

Canlı incele Navigasyon

Vertical Tab Circle Bg Active

Vertical tabs with a circular active background indicator.

#hover #transform #shadow

Canlı incele Navigasyon

Vertical Tab Collapsible Tree

Vertical tabs in a collapsible tree structure with sub-items.

Canlı incele Navigasyon

Vertical Tab Color Shift

Vertical tabs that shift through accent colors on hover.

Canlı incele Navigasyon

Vertical Tab Counter Badge

Vertical tabs with a counter badge showing item counts.

Canlı incele Navigasyon

Vertical Tab Flip Card

Vertical tabs that flip in 3D when active, revealing content.

#hover #transform #shadow

Canlı incele Navigasyon

Vertical Tab Icon Leading

Vertical tabs with leading icons that scale on active.

#hover #transform

Canlı incele Navigasyon

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

#hover #animation #transform

Canlı incele Navigasyon

Vertical Tab Rounded Soft

Soft rounded vertical tabs with gentle hover transitions.

Canlı incele Navigasyon

Vertical Tab Square Sharp

Sharp square vertical tabs with brutalist styling.

#hover #transform #border

Canlı incele Navigasyon

Vertical Tab Tree Branch

Vertical tabs with a tree branch connector line between levels.

Canlı incele Navigasyon

Vertical Tab Underline Slide

Vertical tab nav where the active underline slides between items.

#hover #transform #shadow

Canlı incele Navigasyon

Diagonal Wipe Reveal Nav

Diagonal wipe transitions across the nav when hovering different items.

#hover #gradient #transform