Most Popular CSS Effects (Page 80)

Live preview Navigation

Recent Commands Palette

Palette grouping commands into Recent and All sections.

#hover #transform #shadow

Live preview Navigation

Search Command Palette

Command palette with a search input and filtered command rows.

#hover #shadow #border

Live preview Navigation

Coupon Clip Corner Nav

Nav items styled as coupons with clipped circular corners.

#hover #gradient #transform

Live preview Navigation

Filled Arrow Breadcrumbs

Breadcrumbs styled as filled arrow shapes.

#hover #gradient

Live preview Navigation

Arrow Flow Breadcrumbs

Breadcrumbs with arrow-shaped separators.

#hover #gradient

Live preview Navigation

Outline Arrow Breadcrumbs

Breadcrumbs with outlined arrow shapes.

#hover #border

Live preview Navigation

Background Highlight Breadcrumbs

Breadcrumbs with hover background highlight.

#hover

Live preview Navigation

Chevron Breadcrumbs

Breadcrumbs with chevron separators.

#hover

Live preview Navigation

Chevron Fill Breadcrumbs

Breadcrumbs with filled chevron-shaped items.

#hover #gradient

Live preview Navigation

Circle Background Breadcrumbs

Breadcrumbs with circular item backgrounds.

#hover #gradient #transform

Live preview Navigation

Color Active Breadcrumbs

Breadcrumbs with color change on active item.

#hover #shadow

Live preview Navigation

Diagonal Arrow Breadcrumbs

Breadcrumbs with diagonal arrow separators.

#hover #transform

Live preview Navigation

Dot Separator Breadcrumbs

Breadcrumbs with dot separators.

#hover #transform

Live preview Navigation

Dot Trail Breadcrumbs

Breadcrumbs with a trail of dots leading to active.

#hover #gradient

Live preview Navigation

Dotted Trail Breadcrumbs

Breadcrumbs with dotted connecting lines.

#hover #transform #border

Live preview Navigation

Floating Arrow Breadcrumbs

Breadcrumbs with floating arrow separators on hover.

#hover #transform

Live preview Navigation

Glow Active Breadcrumbs

Breadcrumbs with glow on active item.

#hover #shadow

Live preview Navigation

Glow Trail Breadcrumbs

Breadcrumbs with a glowing connecting trail.

#hover #transform #shadow

Live preview Navigation

Gradient Arrow Breadcrumbs

Breadcrumbs with gradient arrow separators.

#hover #animation #gradient

Live preview Navigation

Home Icon Breadcrumbs

Breadcrumbs starting with a home icon.

#hover

Live preview Navigation

Hover Rotate Breadcrumbs

Breadcrumbs that rotate slightly on hover.

#hover #gradient #transform

Live preview Navigation

Hover Underline Breadcrumbs

Breadcrumbs with animated underline on hover.

#hover

Live preview Navigation

Mini Tab Breadcrumbs

Breadcrumbs styled as mini tabs.

#hover #shadow #border

Live preview Navigation

Pentagon Shape Breadcrumbs

Breadcrumbs shaped as pentagons with point tips.

#hover #gradient

Live preview Navigation

Pill Active Breadcrumbs

Breadcrumbs with pill shape on active item.

#hover #gradient #shadow

Live preview Navigation

Pill Background Breadcrumbs

Breadcrumbs with pill-shaped items.

#hover #gradient #shadow

Live preview Navigation

Progress Line Breadcrumbs

Breadcrumbs with a connecting progress line.

#hover #gradient

Live preview Navigation

Shadow Active Breadcrumbs

Breadcrumbs with shadow on active item.

#hover #shadow

Live preview Navigation

Slash Separator Breadcrumbs

Breadcrumbs with slash separators.

#hover

Live preview Navigation

Square Background Breadcrumbs

Breadcrumbs with square item backgrounds.

#hover

Live preview Navigation

Step Counter Breadcrumbs

Breadcrumbs with numbered step counter.

#hover

Live preview Navigation

Vertical Line Breadcrumbs

Vertical breadcrumbs with line connectors.

#hover #transform #shadow

Live preview Navigation

Wavy Trail Breadcrumbs

Breadcrumbs with wavy connecting separators.

#hover #transform

Live preview Navigation

Curtain Fall Reveal Nav

Nav links revealed as a curtain falls downward on hover.

#hover #gradient #transform

Live preview Navigation

Curtain Rise Reveal Nav

Nav links revealed as a curtain rises upward on hover.

#hover #gradient #transform

Live preview Navigation

Dark Blur Navbar

Dark themed navbar with frosted blur background.

#hover #shadow #border

Live preview Navigation

3D Dot Nav

3D extruded dot navigation.

#hover #gradient #transform

Live preview Navigation

Circle Dot Nav

Dot navigation in a circle container.

#hover #gradient #transform

Live preview Navigation

Floating Bottom Dot Nav

Floating dot navigation at bottom.

#hover #gradient #transform

Live preview Navigation

Floating Left Dot Nav

Floating dot navigation on left with shadow.

#hover #transform #shadow

Live preview Navigation

Floating Right Dot Nav

Floating dot navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Floating Top Dot Nav

Floating dot navigation at top.

#hover #transform #shadow

Live preview Navigation

Glow Dot Nav

Dot nav with glowing active dot.

#hover #shadow #border

Live preview Navigation

Gradient Dot Nav

Dot nav with gradient active dot.

#hover #gradient #transform

Live preview Navigation

Neon Dot Nav

Neon themed dot navigation.

#hover #shadow #border

Live preview Navigation

Square Dot Nav

Dot nav with square-shaped dots.

#hover #shadow #border

Live preview Navigation

Vertical Left Dot Nav

Vertical dot navigation fixed to left side.

#hover #transform #shadow

Live preview Navigation

Vertical Right Dot Nav

Vertical dot navigation fixed to right side.

#hover #transform #shadow

Live preview Navigation

3D Perspective Drawer Navbar

Drawer with a 3D perspective active link lifting forward.

#hover #transform #shadow

Live preview Navigation

Brutalist Block Drawer Navbar

Drawer with raw brutalist block styling, sharp borders, and offset shadow.

#hover #transform #shadow

Live preview Navigation

Cascading Multi Drawer Navbar

Multi-level cascading drawer with progressively indented levels.

#hover #border

Live preview Navigation

Collapsible Arrow Drawer Navbar

Drawer with collapsible sections toggled by an arrow indicator.

#hover #transform

Live preview Navigation

Dark Panel Drawer Navbar

Dark panel drawer with subtle border accents.

#hover #border

Live preview Navigation

Floating Overlay Drawer Navbar

Floating drawer that overlays content without pushing it.

#hover #animation #transform

Live preview Navigation

Glow Edge Drawer Navbar

Drawer with a glowing active edge in indigo neon.

#hover #transform #shadow

Live preview Navigation

Nested Accordion Drawer Navbar

Accordion drawer with expandable sections revealing sub-links.

#hover #transform

Live preview Navigation

Neumorphic Panel Drawer Navbar

Drawer with soft neumorphic embossed styling.

#hover #shadow #border

Live preview Navigation

Blur Overlay Drawer Navbar

Drawer over a frosted blurred backdrop.

#hover #animation #gradient

Live preview Navigation

Dim Overlay Drawer Navbar

Drawer over a dimmed dark overlay backdrop.

#hover #animation #transform

Live preview Navigation

Pin Sticky Drawer Navbar

Drawer with a pinned sticky header that stays at the top.

#hover #shadow

Live preview Navigation

Pinned Side Drawer Navbar

Pinned left-side drawer that persists beside the main content.

#hover #shadow #border

Live preview Navigation

3D Left Drawer Navbar

Left drawer with 3D perspective slide revealing main nav beside it.

#hover #animation #gradient

Live preview Navigation

3D Right Drawer Navbar

Right drawer with 3D perspective slide.

#hover #animation #gradient

Live preview Navigation

Square Sharp Drawer Navbar

Drawer with sharp square corners and bold contrast.

#hover #transform #border

Live preview Navigation

Fading Dropdown Menu

The submenu drops a few pixels and fades in, staying open while the pointer is inside.

#hover #transform #shadow

Live preview Navigation

3D Flip Card Navbar

Each link is a 3D flip card revealing a back face on hover.

#hover #transform #3d

Live preview Navigation

Horizontal Flip Navbar

Links flip horizontally (Y-axis) on hover for a side reveal.

#hover #transform #3d

Live preview Navigation

Vertical Flip Navbar

Links flip vertically (X-axis) on hover for a top-down reveal.

#hover #transform #3d

Live preview Navigation

Floating Action Navbar

Navbar with floating action-style buttons.

#hover #gradient #transform

Live preview Navigation

Floating Glass Navbar

Detached floating glass navbar with strong blur.

#hover #shadow #border

Live preview Navigation

Floating Pill Navbar

Floating rounded pill navbar with a sliding active indicator.

#hover #shadow

Live preview Navigation

Frosted Edge Navbar

Frosted navbar with crystal edge highlight.

#hover #shadow #border

Live preview Navigation

Glassmorphism Navbar

Frosted glass navbar with backdrop blur and translucent background.

#hover #shadow #border

Live preview Navigation

Glow Pulse Navbar

Navbar with pulsing glow around active link.

#hover #animation #shadow

Live preview Navigation

Gradient Border Navbar

Navbar with animated gradient border around active link.

#hover #animation #gradient

Live preview Navigation

Hamburger Morph Button

Three bars rotate and collapse into a clean cross when the menu is opened.

#transform #menu

Live preview Navigation

Has-Selector Active Nav

Selecting a radio marks the item active and shifts the whole bar accent with :has().

#hover #shadow #border

Live preview Navigation

Holographic Navbar

Navbar with holographic gradient overlay.

#hover #animation #gradient

Live preview Navigation

Circle Icon Nav

Icon nav with circular icons.

#hover #gradient #transform

Live preview Navigation

Floating Icon Nav

Floating icon navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Glow Icon Nav

Icon nav with glowing active icon.

#hover #shadow #border

Live preview Navigation

Gradient Icon Nav

Icon nav with animated gradient background.

#hover #animation #gradient

Live preview Navigation

Horizontal Icon Nav

Horizontal icon-only navigation.

#hover #gradient #shadow

Live preview Navigation

Neon Icon Nav

Neon themed icon navigation.

#hover #shadow #border

Live preview Navigation

Vertical Icon Nav

Vertical icon navigation.

#hover #gradient #shadow

Live preview Navigation

Iris Aperture Spin Nav

Iris aperture blades that spin open like a camera shutter on hover.

#hover #transform

Live preview Navigation

Iris Aperture Zoom Nav

Iris aperture that zooms open to reveal nav links in the center.

#hover #gradient #transform

Live preview Navigation

Lift Soar Navbar

Links lift and soar upward with strong shadow projection.

#hover #transform #shadow

Live preview Navigation

Light Blur Navbar

Light navbar with translucent blur and soft glow.

#hover #gradient #shadow

Live preview Navigation

Light Clean Navbar

Clean white navbar with soft shadow and pill active state.

#hover #shadow

Live preview Navigation

Mega Shadow Navbar

Navbar with multiple layered shadows for depth.

#hover #shadow

Live preview Navigation

Accordion Menu

Accordion menu with expandable sections.

#hover #transform

Live preview Navigation

Hover Dropdown Menu

Dropdown menu revealed on hover.

#hover #transform #shadow

Live preview Navigation

Fade In Menu

Menu that fades in on toggle.

#hover #shadow

Live preview Navigation

Flyout Menu

Menu with flyout submenu on hover.

#hover #transform #shadow

Live preview Navigation

Horizontal Dropdown Menu

Horizontal menu with dropdown items.

#hover #transform #shadow

Browse by category

Popular tags