#gradient CSS effects

4,959 free, pure-CSS effects match the "gradient" tag. Each is copy-ready and needs no library or build step.

Live preview Navigation

Sticky Note Curl Nav

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

#hover #gradient #transform

Live preview Navigation

Sunset Orange Navbar

Sunset orange navbar with warm gradient.

#hover #gradient #shadow

Live preview Navigation

3D Shadow Tabs

Tabs with deep 3D shadow on active.

#hover #gradient #transform

Live preview Navigation

Animated Underline Tabs

Tabs with continuously animated underline.

#hover #animation #gradient

Live preview Navigation

Pentagon Background Tabs

Tabs with polygon clip-path background morph.

#hover #gradient

Live preview Navigation

Square Background Tabs

Tabs with square background morph on hover.

#hover #gradient #transform

Live preview Navigation

Color Shift Tabs

Tabs that shift hue on hover.

#hover #gradient #shadow

Live preview Navigation

Cube Rotate Tabs

Tabs that rotate like a 3D cube on hover.

#hover #gradient #transform

Live preview Navigation

Flip 3D Tabs

Tabs with full 3D flip transform on hover.

#hover #gradient #transform

Live preview Navigation

Fold Corner Tabs

Tabs with folded corner effect on active.

#hover #gradient

Live preview Navigation

Gradient Background Tabs

Tabs with animated gradient background on active.

#hover #animation #gradient

Live preview Navigation

Gradient Underline Tabs

Tabs with animated gradient underline.

#hover #gradient #transform

Live preview Navigation

Raised Active Tabs

Active tab appears raised above others.

#hover #gradient #transform

Live preview Navigation

Rounded Active Tabs

Fully rounded active tab indicator.

#hover #gradient #shadow

Live preview Navigation

Slide Content Tabs

Tabs with sliding content background indicator.

#hover #gradient #transform

Live preview Navigation

Text Cinematic Glow Navbar

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

#hover #gradient #shadow

Live preview Navigation

Text Fill Mask Navbar

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

#hover #gradient

Live preview Navigation

Text Gradient Shift Link Navbar

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

#hover #gradient

Live preview Navigation

Text Rainbow Flow Navbar

Active link text flows through a rainbow gradient animation.

#hover #animation #gradient

Live preview Navigation

3D Tilt Hover Navbar

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

#hover #gradient #transform

Live preview Navigation

Vertical Tab Fill Bg

Vertical tabs with a sliding colored fill background on hover.

#hover #gradient #transform

Live preview Navigation

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

#hover #animation #gradient

Live preview Navigation

Vertical Tab Pill Morph

Vertical tabs where the active pill morphs smoothly between items.

#hover #gradient #transform

Live preview Navigation

Vertical Tab Progress Bar

Vertical tabs with an active progress bar fill on the active item.

#hover #gradient

Live preview Navigation

Circle Mask Wipe Nav

Active indicator revealed by a circle that expands outward from the link.

#hover #gradient #transform

Live preview Navigation

Diagonal Wipe Reveal Nav

Diagonal wipe transitions across the nav when hovering different items.

#hover #gradient #transform

Live preview Navigation

Wipe Left Reveal Nav

Active tab revealed by a leftward wipe that sweeps across the nav.

#hover #gradient #transform

Live preview Navigation

Wipe Right Reveal Nav

Active tab revealed by a rightward wipe sweeping across the nav bar.

#hover #gradient #transform

Live preview Text

Abalone Shell

Abalone shell iridescent colors.

#gradient #filter

Live preview Text

Abstract Fluid

Abstract fluid organic shapes.

#gradient

Live preview Text

Abstract Ink

Abstract ink blot pattern.

#gradient

Live preview Text

Abstract Splash

Abstract paint splash pattern.

#gradient

Live preview Text

Acropolis Greek

Greek acropolis marble on text.

#animation #gradient #filter

Live preview Text

Amber Resin

Translucent amber resin with a warm honey glow.

#gradient #shadow #filter

Live preview Text

Amber Warm Resin

Warm amber resin fossil finish.

#gradient #filter

Live preview Text

Amethyst Purple

Amethyst purple crystal gem.

#gradient #filter

Live preview Text

Andromeda Galaxy

Spiraling blue Andromeda galaxy in text.

#animation #gradient #transform

Live preview Text

Argyle Diamond

Argyle diamond pattern in classic preppy colors.

#gradient

Live preview Text

Arrows Flow

Flowing arrows direction pattern.

#gradient

Live preview Text

Art Deco Gold

Elegant art deco gold text with symmetrical flair.

#gradient #shadow

Live preview Text

Art Deco Gold Leaf

Art deco gold leaf ornate.

#gradient #shadow

Live preview Text

Art Nouveau Organic Vine

Art nouveau organic vine style.

#gradient #shadow

Live preview Text

Asphalt Grit

Asphalt gritty dark texture.

#gradient #filter

Live preview Text

Aurora Australis

Southern lights rippling in cool tones.

#animation #gradient #transform

Live preview Text

Aurora Borealis

Northern lights shimmering across text.

#animation #gradient #filter

Live preview Text

Aurora Glow

Soft shifting aurora borealis gradient glow.

#animation #gradient #shadow

Live preview Text

Bamboo Tall

Tall bamboo stalk on text.

#animation #gradient #transform

Live preview Text

Banner Scroll Parchment

Parchment scroll banner style.

#gradient #shadow

Live preview Text

Bark Rough

Tree bark texture with deep furrowed lines.

#gradient

Live preview Text

Baroque Ornate

Ornate baroque gold on text.

#animation #gradient #shadow

Live preview Text

Basil Herb

Fresh basil herb on text.

#animation #gradient #shadow

Live preview Text

Bauhaus Block

Bauhaus primary color blocks on text.

#animation #gradient #transform

Live preview Text

Bauhaus Primary

Bauhaus primary-color blocks within text.

#gradient

Live preview Text

Beam Spotlight

Vertical beam of light shining down on text.

#animation #gradient

Live preview Text

Bicolor Contrast

High contrast yellow and black bicolor.

#gradient

Live preview Text

Bicolor Harmony

Harmonious analogous bicolor blend.

#gradient

Live preview Text

Birch White

White birch bark on text.

#animation #gradient

Live preview Text

Black Hole Pull

Text being slowly sucked into a dark void center.

#animation #gradient #filter

Live preview Text

Blackberry Dark

Dark purple blackberry on text.

#animation #gradient #shadow

Live preview Text

Blueberry Blue

Deep blue blueberry on text.

#animation #gradient #shadow

Live preview Text

Blueprint Architect

Architect blueprint drawing.

#gradient

Live preview Text

Bokeh Blur

Soft bokeh circles of light blurring behind text.

#gradient

Live preview Text

Brass Polished

Polished brass gold metallic finish.

#gradient

Live preview Text

Brick Mortar

Brick wall pattern text with mortar lines.

#gradient

Live preview Text

Bronze Aged

Aged bronze with patina hints.

#gradient

Live preview Text

Rising Bubbles

Animated bubbles rising through the text fill.

#animation #gradient

Live preview Text

Burlap Coarse

Coarse burlap fabric weave.

#gradient

Live preview Text

Byzantine Mosaic

Byzantine gold mosaic on text.

#animation #gradient #filter

Live preview Text

Cadenza Solo

Virtuosic solo cadenza on text.

#animation #gradient #transform

Live preview Text

Candy Coated

Candy coated glossy shell.

#gradient #filter

Live preview Text

Canvas Rough

Rough canvas painter weave.

#gradient #filter

Live preview Text

Cardamom Pod

Green cardamom pod on text.

#animation #gradient #transform

Live preview Text

Cardboard Recycled

Recycled cardboard kraft paper.

#gradient #filter

Live preview Text

Carnival Mask

Mardi Gras carnival mask on text.

#animation #gradient #shadow

Live preview Text

Cassette Tape Roll

Rolling cassette tape spooling text.

#animation #gradient #shadow

Live preview Text

Castle Stone

Grey stone castle wall on text.

#animation #gradient #shadow

Live preview Text

Caustic Water

Water caustic light pattern.

#gradient

Live preview Text

CD Shimmer

Iridescent CD surface shimmer on text.

#animation #gradient #transform

Live preview Text

Ceramic Glazed

Glazed ceramic glossy finish.

#gradient #filter

Live preview Text

Chateau French

French chateau elegance on text.

#animation #gradient #shadow

Live preview Text

Checker Board

Classic black-and-white checkerboard filling.

#gradient

Live preview Text

Checker Diagonal

Diagonal checkerboard pattern.

#gradient

Live preview Text

Chess Queen

Chess queen crown on text.

#animation #gradient #shadow

Live preview Text

Chevron Arrows

Bold chevron arrow stripes in two-tone.

#gradient

Live preview Text

Chevron Nested

Nested chevron arrow pattern.

#gradient

Live preview Text

Chorus Shimmer

Shimmering chorus effect on text.

#animation #gradient #shadow

Live preview Text

Chrome Metallic

Polished chrome metallic text with bright reflection and dark base.

#gradient #shadow #filter

Live preview Text

Chrome Mirror

Chrome mirror reflective finish.

#gradient

Live preview Text

Chrysanthemum Burst

Bursting chrysanthemum petals on text.

#animation #gradient #transform

Live preview Text

Cinema Projector

Cinema projector beam glow.

#gradient #shadow #filter

Live preview Text

Cinema Spotlight

Cinema spotlight on text.

#animation #gradient #shadow

Live preview Text

Cinnamon Bark

Warm cinnamon bark on text.

#animation #gradient #filter

Live preview Text

Circuit Trace

Circuit board trace pattern.

#gradient

Live preview Text

Circus Tent

Circus striped tent on text.

#animation #gradient #transform

Live preview Text

Clear Sky Blue

Crystal clear blue sky on text.

#animation #gradient #shadow

Live preview Text

Climb Mountain

Mountain climber ascending on text.

#animation #gradient #transform

Popular tags