# border CSS effects

Live preview Navigation

Neon Edge Navbar

Navbar with neon glowing edges.

Live preview Navigation

Planet Rotation Menu

Center sun with planet items rotating around it on a continuous orbit path.

Live preview Navigation

Solar System Menu

Solar system layout with planets on concentric orbit rings of different speeds.

Live preview Navigation

Dark Blurred Overlay Navbar

Dark overlay with heavy backdrop blur covering the page content.

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

Live preview Navigation

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

Live preview Navigation

Side Panel Tabs Navbar

Side panel with vertical tabs over a dimmed overlay.

Live preview Navigation

3D Pagination

Pagination with 3D extruded active button.

Live preview Navigation

Active Border Pagination

Active page has animated border.

Live preview Navigation

Active Glow Pagination

Active page has glowing aura.

Live preview Navigation

Arrow Square Pagination

Pagination with square arrow buttons.

Live preview Navigation

Load More Pagination

Single load more button pagination.

Live preview Navigation

Neon Pagination

Dark neon themed pagination.

Live preview Navigation

3D Pill Nav

Pill nav with 3D extruded active pill.

Live preview Navigation

Glow Pill Nav

Pill nav with glowing active pill.

Live preview Navigation

Neon Pill Nav

Neon themed pill navigation.

Live preview Navigation

Pinned Top Navbar

Top-pinned navbar with full width and sticky look.

Live preview Navigation

Glow Trail Step Nav

Stepper with a glowing trail line that pulses along the active path.

Live preview Navigation

Progress Ring Tracker Nav

Vertical step tracker with circular progress rings on each milestone.

Live preview Navigation

Vertical Timeline Nav

Timeline nav with a center spine and milestone dots that activate on hover.

Live preview Navigation

Royal Purple Navbar

Royal purple navbar with golden accents.

#hover #gradient #shadow

Live preview Navigation

Glow Segmented Control

Dark segmented control with a neon glow on the active segment.

Live preview Navigation

Bottom Sheet Navbar

Mobile bottom sheet that slides up to reveal nav links.

Live preview Navigation

Back Arrow Sheet Navbar

Sheet with a back arrow navigation button at the top.

Live preview Navigation

Close X Sheet Navbar

Bottom sheet with an X close button in the corner.

Live preview Navigation

Left Slide Sheet Navbar

Vertical sheet sliding in from the left with stacked links.

Live preview Navigation

Right Slide Sheet Navbar

Vertical sheet sliding in from the right with profile-style links.

Live preview Navigation

Slant Glow Edge Navbar

Slanted nav with glowing edge accents along the cuts.

#hover #animation #shadow

Live preview Navigation

Slant Neon Edge Navbar

Slanted nav with pulsing neon pink edge accents.

Live preview Navigation

Split Horizontal Divider Navbar

Nav links separated by horizontal lines stacked vertically.

Live preview Navigation

Split Layout Navbar

Navbar with brand on left, links center, actions on right.

Live preview Navigation

Split Thirds Grid Navbar

Nav split into three equal columns separated by dividers.

Live preview Navigation

Split Vertical Divider Navbar

Nav with prominent vertical divider bars between links.

Live preview Navigation

Square Sharp Navbar

Sharp-edged navbar with no rounding.

Live preview Navigation

Stamp Ink Rotate Nav

Active link shows a rotated ink stamp badge with skewed impression.

Live preview Navigation

Stamp Paper Fold Nav

Paper sheet nav with folded corner revealing the active item underneath.

Live preview Navigation

3D Step Indicator

3D extruded step indicator.

Live preview Navigation

Circular Step Indicator

Step indicator with circular progress ring.

Live preview Navigation

Neon Step Indicator

Neon themed step indicator.

Live preview Navigation

Sticky Shrink Navbar

Navbar that shrinks padding on hover simulating sticky state.

Live preview Navigation

3D Shadow Tabs

Tabs with deep 3D shadow on active.

Live preview Navigation

Animated Underline Tabs

Tabs with continuously animated underline.

Live preview Navigation

Arrow Indicator Tabs

Tabs with an arrow indicator under active tab.

Live preview Navigation

Border Bottom Tabs

Classic tabs with active border bottom.

Live preview Navigation

Border Box Tabs

Tabs with animated border box on active.

Live preview Navigation

Dashed Underline Tabs

Tabs with dashed underline indicator.

Live preview Navigation

Dotted Underline Tabs

Tabs with dotted underline indicator.

Live preview Navigation

Double Underline Tabs

Tabs with double underline indicator.

Live preview Navigation

Gradient Underline Tabs

Tabs with animated gradient underline.

Live preview Navigation

Bottom Line Tabs

Tabs with thin bottom line indicator.

Live preview Navigation

Raised Active Tabs

Active tab appears raised above others.

Live preview Navigation

Thick Underline Tabs

Tabs with a thick underline indicator.

Live preview Navigation

Top Border Tabs

Tabs with active top border indicator.

Live preview Navigation

Underline Grow Tabs

Tabs with underline that grows from left on active.

Live preview Navigation

Underline Slide Tabs

Tabs with sliding underline indicator on active state.

Live preview Navigation

Letter Spacing Grow Navbar

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

Live preview Navigation

Ticket Stub Perforate Nav

Nav styled as ticket stubs with perforated edges between items.

Live preview Navigation

Ticket Stub Tear Nav

Active ticket stub torn along its perforation edge on hover.

Live preview Navigation

Connector Line Treeview

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

Live preview Navigation

Vibrant Pop Navbar

Vibrant colorful navbar with bold contrast.

Live preview Navigation

Vertical Tab Left Arrow Pointer

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

Live preview Navigation

Vertical Tab Right Arrow Pointer

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

Live preview Navigation

Vertical Tab Left Border Active

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

Live preview Navigation

Vertical Tab Right Border Active

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

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

Live preview Navigation

Vertical Tab Square Sharp

Sharp square vertical tabs with brutalist styling.

#animation #transform #shadow

Asteroid Belt

Orbiting specks circling around text.

Brutalist Contrast Stark

Brutalist stark black and white.

#border

Brutalist Raw

Raw brutalist text with stark black on white.

#border

Collage Cutout

Magazine cutout collage ransom-style text.

#transform #border

Embossed Text

Subtly embossed text with a light top edge and dark bottom edge for depth.

#shadow #border

Glass Frost

Frosted glass text with a translucent icy blur.

#shadow #border #filter

#gradient #animation #border

Loading Bar

LOADING text with an underline progress bar that fills and resets.

#animation #border #transform

Marquee Scroll

Classic horizontal marquee scrolling text across a dark bar.

Ransom Note

Ransom note style with mismatched letter sizes.

#transform #border

#transform #border #filter

Rubber Stamp

Worn rubber stamp text with broken edges.

#animation #transform #shadow

Satellite Orbit

Satellite orbiting earth on text.

#animation #transform #shadow

Saturn Rings

Text with elliptical rings orbiting around it.

Split-Flap Letters

Each letter flips sequentially like a split-flap departure board.

#animation #3d #border

Ink Stamp

Red ink stamp text with slight imperfections.

#transform #border