#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 Buttons

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Cards

Bronze Achievement Card

Bronze-tier achievement with progress and reward.

#gradient #shadow #border

Live preview Backgrounds

Deep Abyss

Lightless ocean abyss glows faintly with bioluminescent specks.

#animation #gradient #transform

Live preview Backgrounds

De Stijl Mondrian

Mondrian-style primary color blocks with bold black lines.

#animation #gradient #filter

Live preview Buttons

Alpine Peak

Snow-capped alpine mountain button.

#hover #gradient #shadow

Live preview Cards

Alarm Card

Alarm card with a clock face, set time, and toggle indicator.

#gradient #transform #shadow

Live preview Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

#hover #gradient #shadow

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Hover

3D Tilt Follow

Element tilts in 3D following cursor on hover.

#gradient #transform

Live preview Loaders

Baguette Slice

Baguette being sliced.

#animation #gradient #shadow

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Live preview Cards

Character Sheet Card

RPG character sheet card with stats, class, and level.

#gradient #shadow #border

Live preview Backgrounds

Aurora Curtain

Vertical bands of aurora light ripple like a hanging curtain.

#animation #gradient #transform

Live preview Hover

3D Parallax Tilt

Layers shift in 3D based on cursor position for a parallax depth effect.

#gradient #3d #shadow

Live preview Loaders

Wormhole Tunnel

Traveling through a wormhole tunnel.

#animation #gradient #transform

Live preview Toggles

Hot / Cold

Flame turns to a snowflake as the temperature flips.

#gradient #transform #shadow

Live preview Badges

Action Copy Badge

Copy action badge with duplicate-page glyph and slate tone.

#gradient #shadow #border

Live preview Backgrounds

Brown Noise

Warm brown noise drifting like deep ambient rumble.

#animation #gradient #filter

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Live preview Forms

Midnight Background Input

Deep midnight blue gradient background.

#gradient #shadow #border

Live preview Hover

Aperture Iris Close

A dark circular iris contracts over the panel like a camera aperture closing on hover.

#gradient #hover #border

Live preview Backgrounds

Abalone Nacre

Abalone shell nacre with shifting iridescent colors.

#animation #gradient #transform

Live preview Backgrounds

Cassette Rewind

Cassette reels spin rapidly in reverse as tape rewinds.

#animation #gradient #transform

Live preview Buttons

Frosted Ice Button

Translucent frosted ice button with a sweeping crystalline shine.

#gradient #hover #glass

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

#animation #gradient #transform

Live preview Buttons

Violet Storm

Deep violet button with lightning flicker.

#animation #gradient #shadow

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

#hover #gradient #shadow

Live preview Cards

Beer Flight Card

Beer flight card with sample glasses and ABV range.

#gradient #shadow #border

Live preview Cards

Beer Pair Tips Card

Beer pairing tips card with beer style, dish pairing, and reasoning.

#gradient #shadow #border

Live preview Loaders

Actuator

Linear actuator extending arm.

#animation #gradient

Live preview Loaders

Arcade Cabinet

Retro arcade cabinet screen flickering with neon glow.

#animation #gradient #shadow

Live preview Loaders

Billiards Cue

Pool cue striking ball.

#animation #gradient #transform

Live preview Navigation

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #gradient #transform

Live preview Text

Bicolor Gradient

Smooth bicolor diagonal gradient.

#gradient

Live preview Text

Fade Depth

Text fading from foreground into deep shadow.

#gradient

Live preview Badges

Gold Medal Achievement

Gold medal achievement badge with shine effect.

#gradient #shadow #border

Live preview Badges

Soft Pulse FX Badge

Animated badge with gentle soft-pulse scale animation.

#animation #gradient #transform

Live preview Badges

Platform Web Badge

Web platform badge with browser-globe accent and blue tone.

#gradient #shadow #border

Live preview Badges

Diamond Shape Badge

Diamond/rhombus shaped badge with rotated square styling.

#gradient #shadow

Live preview Badges

Y2K Bubble Badge

Glossy pink bubble badge with translucent highlight.

#gradient #shadow #border

Live preview Backgrounds

Cepheid Variable

A cepheid variable star pulses regularly in brightness.

#animation #gradient #transform

Live preview Backgrounds

Shifting Dunes

Golden desert dunes slowly shift and reshape with the wind.

#animation #gradient #transform

Live preview Backgrounds

Easter Eggs

Colorful painted Easter eggs scatter across spring grass.

#animation #gradient

Live preview Backgrounds

Annular Solar Eclipse

An annular eclipse shows a bright ring of fire around the moon.

#animation #gradient #transform

Live preview Backgrounds

Fluid Pour

Colorful fluid pours down in a steady thick stream.

#animation #gradient #transform

Live preview Backgrounds

Fractal Tree

Self-similar fractal tree with branching limbs growing recursively.

#animation #gradient #transform

Live preview Backgrounds

Kaleidoscope 6

A 6-fold kaleidoscope of bright symmetric patterns.

#animation #gradient #transform

Live preview Backgrounds

Lissajous Curve

Lissajous curve figure traced by harmonic oscillation.

#animation #gradient #transform

Live preview Backgrounds

Morning Glory

Vivid blue morning glory vines spiral upward opening to the sun.

#animation #gradient #transform

Live preview Backgrounds

Paint Mixing

Thick layers of paint fold and mix together in slow motion.

#animation #gradient #transform

Live preview Backgrounds

Paint Splash

Vivid paint splashes burst and drip across a white canvas.

#animation #gradient #transform

Live preview Backgrounds

Plasma Arc

An electric plasma arc crackles between two points.

#animation #gradient #transform

Live preview Backgrounds

Plasma Torch

A bright blue plasma jet emits a thin column of superheated gas.

#animation #gradient #transform

Live preview Backgrounds

Sand Blast

Fine sand streams horizontally in a desert wind blast.

#animation #gradient

Live preview Backgrounds

Snow Drift

Snowflakes drift and accumulate into soft curves on the ground.

#animation #gradient #transform

Live preview Backgrounds

Gentle Snowfall

Soft white snowflakes drift down across a winter night sky.

#gradient #animation #border

Live preview Backgrounds

Spacetime Warp

Spacetime itself warps and ripples around an invisible mass.

#animation #gradient #transform

Live preview Backgrounds

Static Noise

TV static noise grain at full intensity.

#animation #gradient

Live preview Backgrounds

Traffic Lights

Traffic lights cycle through red yellow and green.

#animation #gradient #transform

Live preview Backgrounds

Trophy Shine

A golden trophy spins with a sparkle highlight.

#animation #gradient #transform

Live preview Backgrounds

Wetland Marsh

Calm marsh water reflects reeds and a soft overcast sky.

#animation #gradient #transform

Live preview Buttons

Acorn Cap

Brown acorn with cap-textured top.

#hover #gradient #shadow

Live preview Buttons

Acorn Shell

Acorn-brown button with a glossy cap shell.

#hover #gradient #shadow

Live preview Buttons

Aerospace Panel

Industrial aerospace metal panel with rivets.

#hover #gradient #transform

Live preview Buttons

Almond Cream

Soft almond-cream with brown speckle.

#hover #gradient #transform

Live preview Buttons

Amber Haze

Golden amber button with a hazy outer glow.

#hover #gradient #transform

Live preview Buttons

Andromeda

Andromeda-galaxy button with spiral star arms.

#hover #gradient #transform

Live preview Buttons

Animated Stripe Button

Diagonal candy stripes that scroll continuously across the button.

#gradient #animation #hover

Live preview Buttons

Anodized Aluminum

Colorful anodized aluminum with smooth surface.

#hover #gradient #shadow

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

#hover #gradient #shadow

Live preview Buttons

Aquamarine Sea

Pale aquamarine sea-gem with clear facets.

#hover #gradient #transform

Live preview Buttons

Dahlia Bloom

Layered dahlia petals in deep magenta.

#hover #gradient #transform

Live preview Buttons

Graphite Pencil

Dark graphite pencil-tip sheen.

#hover #gradient #shadow

Live preview Buttons

Honeydew Fresh

Pale honeydew melon green button.

#hover #gradient #transform

Live preview Buttons

Jetty

Jetty-button with stone breakwater pattern.

#hover #gradient #shadow

Live preview Buttons

Moonlight Glow

Pale blue moon-kissed button with halo.

#hover #gradient #shadow

Live preview Buttons

Obelisk

Tall obelisk button with a tapered pyramid top.

#hover #gradient #shadow

Live preview Buttons

Platinum Edge

Polished platinum button with sharp edge.

#hover #gradient #transform

Live preview Buttons

Trailblazer

Bright orange trailblaze with motion lines.

#animation #gradient #transform

Live preview Cards

Archer Card

Archer card with bow icon and accuracy stat.

#gradient #shadow #border

Live preview Cards

Coffee Passport

Coffee passport card with stamp grid, roast notes, and a bean icon.

#gradient #transform #shadow

Live preview Cards

Cruise Port Card

Cruise port card with arrival time, pier, and shore excursions.

#gradient #shadow #border

Live preview Cards

Country Fair Ticket

Rustic country fair ticket with kraft paper, gingham accent, and prize ribbon.

#gradient #shadow #border

Live preview Cards

Friend Request Card

Friend request card with avatar, mutual friends, and buttons.

#gradient #shadow #border

Live preview Cards

GoFundMe Donate Cause Card

Donation campaign card with cause, raised amount, and donate action.

#gradient #shadow #border

Live preview Cards

Guest List Card

Exclusive guest list card with check marks and plus-one indicator.

#gradient #shadow #border

Live preview Cards

Invite Only Card

Invite-only card with an envelope flap, wax seal, and elegant calligraphy title.

#gradient #transform #shadow

Live preview Cards

Macro Tracker Card

Macronutrient tracker card with protein, carbs, fat split as stacked bars.

#gradient #transform #shadow

Live preview Cards

Merry-Go-Round Card

Carousel ride card with horse icon and ride duration.

#gradient #shadow #border

Live preview Cards

Molecule Card

Molecule card with formula, bonds, and structure name.

#gradient #transform #shadow

Live preview Cards

MotoGP Card

MotoGP race card with grid position, lap times, and rider number.

#gradient #shadow

Live preview Cards

9-Ball Pool Card

9-ball pool rack card with ball order and breaker.

#gradient #shadow #border

Live preview Cards

Promotion Card

Promotion card with an upward arrow, trophy, and gold confetti accents.

#animation #gradient #shadow

Live preview Cards

Ribbon Award Card

Ribbon award card with a rosette, dangling tails, and a center medallion.

#gradient #transform #shadow

Popular tags