#gradient CSS effects

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

Live preview Buttons

Colonnade

Colonnade button with a row of column lines.

#hover #gradient #shadow

Live preview Buttons

Comet Trail Button

Dark button with a comet streaking across on hover.

#hover #gradient #transform

Live preview Buttons

Comet Streak

Dark cosmic button with a streaking comet tail.

#hover #gradient #shadow

Live preview Buttons

Comet Tail

Cosmic comet with trailing light streak.

#animation #gradient #transform

Live preview Buttons

Animated Conic Border

Button with a rotating conic-gradient border that spins around the edge.

#gradient #animation #hover

Live preview Buttons

Conic Halo Button

A registered custom property animates the angle of a conic gradient border ring.

#animation #gradient #hover

Live preview Buttons

Constellation

Constellation button with connected star points.

#hover #gradient #transform

Live preview Buttons

Copper Penny

Shiny copper penny with mint sheen.

#hover #gradient #shadow

Live preview Buttons

Coral Reef Button

Warm coral button with a subtle reef texture gradient.

#hover #gradient #transform

Live preview Buttons

Coral Bay

Coral-pink gradient button with a soft bay-water shimmer.

#hover #gradient #transform

Live preview Buttons

Coral Reef

Pink-orange coral with branching pattern.

#hover #gradient #shadow

Live preview Buttons

Coral Spike

Coral-reef button with branching spike accents.

#hover #gradient #transform

Live preview Buttons

Corinthian

Corinthian-capital button with carved leaf accents.

#hover #gradient #shadow

Live preview Buttons

Cornice

Cornice-molding button with a stepped profile.

#hover #gradient #shadow

Live preview Buttons

Cosmic Field Button

Deep-space button with twinkling starfield background.

#hover #animation #gradient

Live preview Buttons

Cosmic Ray

Cosmic-ray button with a vibrant violet streak.

#hover #gradient #shadow

Live preview Buttons

Cotter Pin

Cotter-pin button with a split spring shape.

#hover #gradient #shadow

Live preview Buttons

Cotton Puff

Soft white cotton puff button.

#hover #gradient #transform

Live preview Buttons

Cove Bay Button

Calm cove-blue button with a wave lapping its bottom edge.

#hover #animation #gradient

Live preview Buttons

Crack Glass Button

Glass button that develops crack lines on hover.

#hover #gradient #shadow

Live preview Buttons

Cradle Hold Button

Button cradled in a soft glowing halo on hover.

#hover #gradient #transform

Live preview Buttons

Cranberry Tart

Tart cranberry-red with berry speckles.

#hover #gradient #shadow

Live preview Buttons

Wooden Crate Button

Rustic wooden crate button with plank seams.

#hover #gradient #transform

Live preview Buttons

Crimson Velvet Button

Deep crimson velvet button with a soft sheen sweep.

#hover #gradient #transform

Live preview Buttons

Crocus Spring

Spring crocus purple with yellow stamen.

#hover #gradient #transform

Live preview Buttons

Crown Glow Button

Royal gold button with a glowing crown halo.

#hover #gradient #transform

Live preview Buttons

Crucible

Crucible-button with glowing molten interior.

#hover #gradient #transform

Live preview Buttons

Crystal Facet Button

Crystal button with faceted light reflections.

#hover #gradient #transform

Live preview Buttons

Cubist Geometry

Cubist geometric facets in earth tones.

#hover #gradient #shadow

Live preview Buttons

Cumin Earth

Earthy cumin-brown with spice specks.

#hover #gradient #shadow

Live preview Buttons

Black Currant

Dark purple-black currant with juicy sheen.

#hover #gradient #transform

Live preview Buttons

Current Deep

Deep-current button with flowing directional lines.

#hover #gradient #transform

Live preview Buttons

Curtain Reveal Button

Button whose two-tone curtain slides open on hover.

#hover #gradient #transform

Live preview Buttons

Cylinder Roll Button

Cylindrical button that rolls horizontally on hover.

#hover #animation #gradient

Live preview Buttons

Daffodil Cup

Bright yellow daffodil with orange trumpet.

#hover #gradient #transform

Live preview Buttons

Damson Plum

Deep damson-purple plum with bloom.

#hover #gradient #shadow

Live preview Buttons

Dandelion Wish

Yellow dandelion that scatters on hover.

#hover #gradient #transform

Live preview Buttons

Dandelion Fluff

Soft dandelion button with a fluffy seed crown.

#hover #gradient #transform

Live preview Buttons

Dark Matter

Dark-matter button with an unseen violet pull.

#hover #gradient #transform

Live preview Buttons

Dawn Break

Dawn-breaking button with sun-rise gradient.

#hover #gradient #transform

Live preview Buttons

Dawn Mist

Soft pink-blue dawn mist gradient.

#hover #gradient #shadow

Live preview Buttons

Decay Rust Button

Metallic button that decays into rust on hover.

#hover #gradient #transform

Live preview Buttons

Deep Amber

Deep amber honey with golden sheen.

#hover #gradient #shadow

Live preview Buttons

Deep Sea Button

Abyssal blue button with drifting bubble particles.

#animation #gradient #transform

Live preview Buttons

Deep Swell

Deep-swell button with rising wave bulge.

#hover #gradient #transform

Live preview Buttons

Deer Hide

Tan brown deer hide with subtle texture.

#hover #gradient #shadow

Live preview Buttons

Denim Jeans

Blue denim with stitched weave pattern.

#hover #gradient #shadow

Live preview Buttons

Dewdrop Fresh

Fresh dewdrop on green leaf surface.

#hover #gradient #transform

Live preview Buttons

Diamond Cut Button

Diamond-faceted button that catches light on hover.

#hover #gradient #shadow

Live preview Buttons

Diamond Gem Button

Hexagonal gem-cut button with a top-left sparkle facet.

#gradient #hover #shadow

Live preview Buttons

Dill Weed

Yellow-green dill with feathery leaves.

#hover #gradient #shadow

Live preview Buttons

Dittany

Dittany-herb button with a soft pink-bloom tint.

#hover #gradient #shadow

Live preview Buttons

Dogwood

Dogwood-blossom button with creamy white petals.

#hover #gradient #transform

Live preview Buttons

Dolphin Splash

Sleek dolphin-gray with water splash.

#hover #gradient #transform

Live preview Buttons

Dome Curve

Domed button with a sweeping curved top.

#hover #gradient #shadow

Live preview Buttons

Dovetail

Dovetail-joint button with interlocking trapezoid pins.

#hover #gradient #shadow

Live preview Buttons

Drift Cloud Button

Button that drifts gently sideways on hover.

#hover #animation #gradient

Live preview Buttons

Drift Kelp

Drifting kelp button with floating green strands.

#hover #gradient #shadow

Live preview Buttons

Driftwood Bleached

Sun-bleached gray driftwood texture.

#hover #gradient #shadow

Live preview Buttons

Drill Bit

Drill-bit button with a spiraling fluted pattern.

#hover #gradient #shadow

Live preview Buttons

Water Drop Button

Teardrop-shaped button that wobbles on hover.

#hover #animation #gradient

Live preview Buttons

Drum Beat Button

Button that pulses like a drum beat on hover.

#hover #animation #gradient

Live preview Buttons

Dual Tone Button

Two-tone button with a diagonal color split on hover.

#hover #gradient #border

Live preview Buttons

Duckling Yellow

Soft fuzzy duckling yellow button.

#hover #gradient #transform

Live preview Buttons

Sand Dunes

Wind-carved sand dunes in tan-amber.

#hover #gradient #shadow

Live preview Buttons

Dusk Sunset Button

Warm dusk-gradient button that shifts to twilight on hover.

#hover #gradient #transform

Live preview Buttons

Dwarf Star

Dwarf-star button with a small bright core.

#hover #gradient #transform

Live preview Buttons

Eagle Feather

Brown-white eagle feather pattern.

#hover #gradient #shadow

Live preview Buttons

Eave Shade

Roof-eave button with an angled overhang.

#hover #gradient #shadow

Live preview Buttons

Echinacea

Echinacea-coneflower button with spiky pink petals.

#hover #gradient #transform

Live preview Buttons

Eclipse Shadow

Solar-eclipse button with a creeping shadow disk.

#hover #gradient #transform

Live preview Buttons

Elm Leaf

Elm-leaf green with veined pattern.

#hover #gradient #shadow

Live preview Buttons

Elm Leaf

Elm-green button with an oval veined leaf shape.

#hover #gradient #shadow

Live preview Buttons

Ember Glow Button

Smoldering ember button with a flickering red glow.

#animation #gradient #shadow

Live preview Buttons

Deep Emerald

Deep emerald green with faceted crystal sheen.

#hover #gradient #transform

Live preview Buttons

Emerald Shine Button

Emerald green button with a gem-like shine sweep.

#hover #gradient #transform

Live preview Buttons

Emerald Spark

Emerald-green button that sparks on hover.

#hover #gradient #shadow

Live preview Buttons

Enamel Pin Button

Glossy enamel pin button with a metallic rim.

#hover #gradient #transform

Live preview Buttons

Energy Core Button

Button with a pulsing energy core in its center.

#animation #gradient #transform

Live preview Buttons

Epoxy Resin Button

Glossy epoxy resin button with a glass-like dome.

#hover #gradient #transform

Live preview Buttons

Estuary

Estuary button blending blue water with brown silt.

#hover #gradient #transform

Live preview Buttons

Estuary Flats

Estuary-flats button with tidal mudflat sheen.

#hover #gradient #shadow

Live preview Buttons

Etch Engrave Button

Metal button with an etched engraved text effect.

#hover #gradient #transform

Live preview Buttons

Event Horizon

Black-hole event-horizon button with a glowing rim.

#hover #gradient #transform

Live preview Buttons

Express Train Button

Bold button that zooms forward with motion blur on hover.

#hover #gradient #transform

Live preview Buttons

Fabric Weave Button

Button textured like woven fabric threads.

#hover #gradient #shadow

Live preview Buttons

Facade Brick

Brick-facade button with offset mortar lines.

#hover #gradient #shadow

Live preview Buttons

Fairy Dust Button

Pastel fairy button with sparkling dust on hover.

#hover #gradient #transform

Live preview Buttons

Falconer Glove

Leather falconer glove brown with stitching.

#hover #gradient #shadow

Live preview Buttons

Fall Star

Falling-star button with a downward streak.

#hover #gradient #shadow

Live preview Buttons

Fathom Deep Button

Mysterious deep-blue button that seems to recede on hover.

#hover #gradient #transform

Live preview Buttons

Feldgrau

Field-gray military button with a matte finish.

#hover #gradient #transform

Live preview Buttons

Feldspar

Stony feldspar button with crystalline flecks.

#hover #gradient #shadow

Live preview Buttons

Picket Fence Button

Button with a picket-fence patterned top edge.

#hover #gradient #border

Live preview Buttons

Fern Frond

Fern frond unfurling green spiral.

#hover #gradient #shadow

Live preview Buttons

Fern Frond

Fern-green button with a curled frond tip.

#hover #gradient #transform

Effects tagged #gradient

Popular tags