LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

Öne çıkanlar

En popüler CSS efektleri

Kütüphanedeki 9.078 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 Navigation

Sticky Shadow Navbar

Navbar that grows a deep shadow when stuck to top.

Canlı incele Navigation

Sticky Shrink Navbar

Navbar that shrinks padding on hover simulating sticky state.

#hover #shadow #border

Canlı incele Navigation

Sunset Orange Navbar

Sunset orange navbar with warm gradient.

#hover #gradient #shadow

Canlı incele Navigation

Swing Pendulum Navbar

Links swing like a pendulum anchored at the top on hover.

#hover #animation #transform

Canlı incele Navigation

3D Flip Tabs

Tabs with 3D flip animation on active state.

#hover #transform #shadow

Canlı incele Navigation

3D Shadow Tabs

Tabs with deep 3D shadow on active.

#hover #gradient #transform

Canlı incele Navigation

Animated Underline Tabs

Tabs with continuously animated underline.

#hover #animation #gradient

Canlı incele Navigation

Arrow Indicator Tabs

Tabs with an arrow indicator under active tab.

#hover #transform #border

Canlı incele Navigation

Bar Grow Tabs

Tabs with a top bar that grows from center on active.

#hover #transform

Canlı incele Navigation

Circle Background Tabs

Tabs with circle background morph on hover.

#hover #transform

Canlı incele Navigation

Pentagon Background Tabs

Tabs with polygon clip-path background morph.

#hover #gradient

Canlı incele Navigation

Square Background Tabs

Tabs with square background morph on hover.

#hover #gradient #transform

Canlı incele Navigation

Border Bottom Tabs

Classic tabs with active border bottom.

Canlı incele Navigation

Border Box Tabs

Tabs with animated border box on active.

#hover #transform #border

Canlı incele Navigation

Color Shift Tabs

Tabs that shift hue on hover.

#hover #gradient #shadow

Canlı incele Navigation

Corner Marker Tabs

Tabs with corner marker indicator.

#hover #transform

Canlı incele Navigation

Cube Rotate Tabs

Tabs that rotate like a 3D cube on hover.

#hover #gradient #transform

Canlı incele Navigation

Dashed Underline Tabs

Tabs with dashed underline indicator.

#hover #transform #border

Canlı incele Navigation

Dot Indicator Tabs

Tabs with a glowing dot above active tab.

#hover #transform #shadow

Canlı incele Navigation

Dotted Underline Tabs

Tabs with dotted underline indicator.

#hover #transform #border

Canlı incele Navigation

Double Line Tabs

Tabs with double line top and bottom indicator.

#hover #transform

Canlı incele Navigation

Double Underline Tabs

Tabs with double underline indicator.

#hover #transform #border

Canlı incele Navigation

Fill Background Tabs

Tabs with a filling background animation on hover.

#hover #transform

Canlı incele Navigation

Flip 3D Tabs

Tabs with full 3D flip transform on hover.

#hover #gradient #transform

Canlı incele Navigation

Flip X Tabs

Tabs that flip on X axis on hover.

#hover #transform #shadow

Canlı incele Navigation

Flip Y Tabs

Tabs that flip on Y axis on hover.

#hover #transform #shadow

Canlı incele Navigation

Fold Corner Tabs

Tabs with folded corner effect on active.

#hover #gradient

Canlı incele Navigation

Glow Active Tabs

Active tab with a soft glowing aura.

Canlı incele Navigation

Gradient Background Tabs

Tabs with animated gradient background on active.

#hover #animation #gradient

Canlı incele Navigation

Gradient Underline Tabs

Tabs with animated gradient underline.

#hover #gradient #transform

Canlı incele Navigation

Icon Shift Tabs

Tabs with icon and label that shift on hover.

#hover #transform

Canlı incele Navigation

Bottom Line Tabs

Tabs with thin bottom line indicator.

#hover #transform #border

Canlı incele Navigation

Left Line Tabs

Vertical tabs with left line indicator.

#hover #transform

Canlı incele Navigation

Right Line Tabs

Vertical tabs with right line indicator.

#hover #transform

Canlı incele Navigation

Top Line Tabs

Tabs with thin top line indicator.

#hover #transform

Canlı incele Navigation

Morph Circle Tabs

Active tab morphs into a circle shape.

Canlı incele Navigation

Morph Pill Tabs

Active tab morphs into a pill shape.

Canlı incele Navigation

Morph Square Tabs

Active tab morphs into a square shape.

Canlı incele Navigation

Neon Active Tabs

Neon glowing active tab indicator.

#hover #transform #shadow

Canlı incele Navigation

Pill Morph Tabs

Tabs that morph into pill shape on active.

Canlı incele Navigation

Pressed In Tabs

Tabs that press inward when active.

Canlı incele Navigation

Raised Active Tabs

Active tab appears raised above others.

#hover #gradient #transform

Canlı incele Navigation

Rounded Active Tabs

Fully rounded active tab indicator.

#hover #gradient #shadow

Canlı incele Navigation

Segmented Control Tabs

iOS-style segmented control tabs.

Canlı incele Navigation

Slide Content Tabs

Tabs with sliding content background indicator.

#hover #gradient #transform

Canlı incele Navigation

Square Active Tabs

Square-shaped active tab indicator.

Canlı incele Navigation

Thick Underline Tabs

Tabs with a thick underline indicator.

Canlı incele Navigation

Thin Underline Tabs

Tabs with ultra thin underline indicator.

#hover #transform

Canlı incele Navigation

Top Border Tabs

Tabs with active top border indicator.

Canlı incele Navigation

Underline Grow Tabs

Tabs with underline that grows from left on active.

Canlı incele Navigation

Underline Slide Tabs

Tabs with sliding underline indicator on active state.

#hover #transform #border

Canlı incele Navigation

Taffy Pull Navbar

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

#hover #transform

Canlı incele Navigation

Text 3D Shadow Stack Navbar

Active link text projects a stacked 3D shadow forming extruded depth.

Canlı incele Navigation

Text Blur Focus Navbar

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

Canlı incele Navigation

Text Cinematic Glow Navbar

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

#hover #gradient #shadow

Canlı incele Navigation

Text Fill Mask Navbar

Link text fills with color from the bottom up on hover.

#hover #gradient

Canlı incele Navigation

Text Glitch Hover Navbar

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

#hover #animation #shadow

Canlı incele Navigation

Text Glow Pulse Link Navbar

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

#hover #animation #shadow

Canlı incele Navigation

Text Gradient Shift Link Navbar

Hovered links shift a gradient text fill smoothly across the letters.

#hover #gradient

Canlı incele Navigation

Letter Spacing Grow Navbar

Hovered link expands its letter spacing for a refined editorial feel.

#hover #transform #border

Canlı incele Navigation

Letter Spacing Shrink Navbar

Links have wide letter spacing that compresses on hover.

#hover #transform

Canlı incele Navigation

Text Neon Flicker Navbar

Active link text flickers like a real neon sign.

#hover #animation #shadow

Canlı incele Navigation

Text Rainbow Flow Navbar

Active link text flows through a rainbow gradient animation.

#hover #animation #gradient

Canlı incele Navigation

Text Reveal Mask Navbar

Hovered link text reveals through a vertical wipe mask.

Canlı incele Navigation

Text Scramble Hover Navbar

Hovered links scramble their letters via a positional jitter animation.

#hover #animation #transform

Canlı incele Navigation

Text Shadow Dance Navbar

Hovered links perform a layered text-shadow dance animation.

#hover #animation #shadow

Canlı incele Navigation

Text Slide Down Mask Navbar

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

Canlı incele Navigation

Text Slide Up Mask Navbar

Link text slides up and out, replaced by a duplicate from below.

Canlı incele Navigation

Text Stroke Draw Navbar

Active link text has its stroke drawn animatedly via dash-offset.

#hover #transform

Canlı incele Navigation

Text Stroke Fill Navbar

Outlined text fills with solid color on hover using text-stroke.

Canlı incele Navigation

Text Typewriter Navbar

Active link types out its text with a blinking cursor.

#hover #animation

Canlı incele Navigation

Uppercase Grow Navbar

Hovered link transforms to uppercase with smooth spacing growth.

#hover #transform #shadow

Canlı incele Navigation

Ticket Stub Perforate Nav

Nav styled as ticket stubs with perforated edges between items.

#hover #transform #shadow

Canlı incele Navigation

Ticket Stub Tear Nav

Active ticket stub torn along its perforation edge on hover.

#hover #transform #shadow

Canlı incele Navigation

3D Tilt Hover Navbar

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

#hover #gradient #transform

Canlı incele Navigation

Transparent Overlay Navbar

Transparent navbar that turns solid on hover.

Canlı incele Navigation

Chevron Collapsible Treeview

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

#hover #transform

Canlı incele Navigation

Connector Line Treeview

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

#hover #transform #border

Canlı incele Navigation

Folder Expand Treeview

Tree menu where folder groups expand their children on hover.

Canlı incele Navigation

Icon Leaf Treeview

Tree menu where folders show folder icons and leaves show document icons.

Canlı incele Navigation

Nested Indent Treeview

Tree menu with indent guides showing hierarchy levels.

#hover #transform

Canlı incele Navigation

Vibrant Pop Navbar

Vibrant colorful navbar with bold contrast.

#hover #transform #shadow

Canlı incele Navigation

Vertical Tab 3D Press

Vertical tabs with a 3D press-in effect on the active item.

Canlı incele Navigation

Vertical Tab Left Arrow Pointer

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

#hover #transform #border

Canlı incele Navigation

Vertical Tab Right Arrow Pointer

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

#hover #transform #border

Canlı incele Navigation

Vertical Tab Left Border Active

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

#hover #shadow #border

Canlı incele Navigation

Vertical Tab Right Border Active

Vertical tabs with a right accent border on the active item.

#hover #shadow #border

Canlı incele Navigation

Vertical Tab Bounce Hover

Vertical tabs that bounce elastically when hovered.

#hover #transform

Canlı incele Navigation

Vertical Tab Cascading Sub

Vertical tabs with cascading sub-levels fading into the background.

Canlı incele Navigation

Vertical Tab Circle Bg Active

Vertical tabs with a circular active background indicator.

#hover #transform #shadow

Canlı incele Navigation

Vertical Tab Collapsible Tree

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

Canlı incele Navigation

Vertical Tab Color Shift

Vertical tabs that shift through accent colors on hover.

Canlı incele Navigation

Vertical Tab Counter Badge

Vertical tabs with a counter badge showing item counts.

Canlı incele Navigation

Vertical Tab Dot Indicator

Vertical tabs with a glowing dot indicator on the active item.

#hover #transform #shadow

Canlı incele Navigation

Vertical Tab Fill Bg

Vertical tabs with a sliding colored fill background on hover.

#hover #gradient #transform

Canlı incele Navigation

Vertical Tab Flip Card

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

#hover #transform #shadow

Kategoriye göre gez

Butonlar Kartlar Yükleyiciler Metin Arka Planlar Onay Kutuları Anahtarlar Hover Rozetler Formlar Navigasyon İpuçları

Popüler etiketler

#transform5765 #shadow5548 #gradient4959 #border3831 #animation3495 #hover2879 #filter2139 #3d188 #rotate35 #glow21 #switch19 #clip-path9 #glass7 #wave7 #css6 #dots5 #pulse3