#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

Inlay Strip Button

Wooden button with a thin metallic inlay strip.

#hover #gradient #shadow

Live preview Buttons

Inlet

Coastal-inlet button with calm blue waters.

#hover #gradient #transform

Live preview Buttons

Insect Wing Button

Iridescent button shimmering like an insect wing.

#animation #gradient #border

Live preview Buttons

Ionosphere

Ionosphere button with an electric blue-violet glow.

#hover #gradient #transform

Live preview Buttons

Iris Aperture Button

Camera-iris button whose aperture opens on hover.

#hover #gradient #transform

Live preview Buttons

Iris Petal

Iris-violet button with a drooping petal accent.

#hover #gradient #transform

Live preview Buttons

Iron Plate Button

Heavy iron-plated button with rivets and a beveled edge.

#hover #gradient #transform

Live preview Buttons

ISS Orbit

ISS-orbit button with a satellite streak.

#hover #gradient #shadow

Live preview Buttons

Ivory Bone Button

Creamy ivory button with a polished bone finish.

#hover #gradient #transform

Live preview Buttons

Ivory Wash

Soft ivory button with a painted wash look.

#hover #gradient #transform

Live preview Buttons

Ivy Vine

Ivy-vine button with a climbing leaf pattern.

#hover #gradient #shadow

Live preview Buttons

Jackal Pelt

Tawny jackal-fawn with darker back stripe.

#hover #gradient #shadow

Live preview Buttons

Jade Stone Button

Polished jade-green button with a translucent stone sheen.

#hover #gradient #transform

Live preview Buttons

Jade Mist

Misty jade-green button with soft inner glow.

#hover #gradient #transform

Live preview Buttons

Jasmine Bloom

White jasmine bloom with yellow center.

#hover #gradient #transform

Live preview Buttons

Jasmine Vine

Jasmine-vine button with white blossom clusters.

#hover #gradient #shadow

Live preview Buttons

Jasper

Earthy jasper stone button with banded veins.

#hover #gradient #shadow

Live preview Buttons

Jaw Clamp

Jaw-clamp button with serrated gripping edges.

#hover #gradient #shadow

Live preview Buttons

Jazz Club Button

Smoky purple button with a jazzy brass shimmer.

#hover #gradient #shadow

Live preview Buttons

Jet Stream Button

Sleek dark button with a jet-stream trail on hover.

#hover #gradient #transform

Live preview Buttons

Jig

Jig-button with precise cross-grid pattern.

#hover #gradient #shadow

Live preview Buttons

Joist

Joist-button with parallel wood beams.

#hover #gradient #shadow

Live preview Buttons

Joy Burst Button

Cheerful button that bursts with colorful rays on hover.

#hover #gradient #transform

Live preview Buttons

Jungle Leaf Button

Lush jungle button with overlapping leaf-textured layers.

#hover #gradient #shadow

Live preview Buttons

Juniper Berry

Dark green juniper with blue berries.

#hover #gradient #shadow

Live preview Buttons

Juniper Berry

Juniper-green button with blue berry specks.

#hover #gradient #shadow

Live preview Buttons

Kaleidoscope Button

Colorful button with a rotating kaleidoscope pattern.

#animation #gradient #transform

Live preview Buttons

Kayak

Kayak button with a streamlined hull shape.

#hover #gradient #transform

Live preview Buttons

Kelp Forest Button

Underwater green button with swaying kelp strands.

#animation #gradient #transform

Live preview Buttons

Kelp Crown

Kelp-crown button with a golden sea crown.

#hover #gradient #transform

Live preview Buttons

Kelp Forest

Underwater kelp forest green with current.

#animation #gradient #transform

Live preview Buttons

Kelp Leaf

Sea-kelp button with a frilled leaf edge.

#hover #gradient #shadow

Live preview Buttons

Kerosene Flame Button

Old kerosene-lamp button with a flickering blue flame core.

#animation #gradient #shadow

Live preview Buttons

Keystone

Keystone button with a wedge-shaped highlight.

#hover #gradient #shadow

Live preview Buttons

Khaki Canvas

Khaki canvas button with weave texture.

#hover #gradient #shadow

Live preview Buttons

Kick Drum Button

Round button that kicks with a thump on click.

#gradient #transform #shadow

Live preview Buttons

Kiln

Kiln-button with a fiery ceramic interior.

#hover #gradient #transform

Live preview Buttons

Kingfisher Dive

Bright kingfisher blue-orange bird button.

#hover #gradient #transform

Live preview Buttons

Kite Fly Button

Diamond-shaped kite button that sways in the wind on hover.

#hover #animation #gradient

Live preview Buttons

Knit Sweater Button

Cozy button textured like a knitted wool sweater.

#hover #gradient #shadow

Live preview Buttons

Knot Grass

Knot-grass button with woven green strands.

#hover #gradient #shadow

Live preview Buttons

Koi Pond

Orange-white koi fish swimming button.

#hover #gradient #transform

Live preview Buttons

Lace Trim Button

Delicate button with a scalloped lace-trim border.

#hover #gradient #border

Live preview Buttons

Lagoon Pool Button

Tropical lagoon button with rippling water surface.

#animation #gradient #transform

Live preview Buttons

Lagoon Calm

Calm lagoon button with a smooth cyan surface.

#hover #gradient #transform

Live preview Buttons

Lake Reflect Button

Calm lake button with a mirrored reflection beneath it.

#hover #gradient #transform

Live preview Buttons

Lantern Glow Button

Paper lantern button with a warm flickering inner glow.

#animation #gradient #shadow

Live preview Buttons

Lapis Lazuli

Deep lapis blue with golden flecks.

#hover #gradient #shadow

Live preview Buttons

Lathe

Lathe-button with concentric turning rings.

#hover #gradient #shadow

Live preview Buttons

Lattice Grid Button

Button with an open lattice-grid frame on hover.

#hover #gradient #shadow

Live preview Buttons

Launch Rocket Button

Button that launches upward like a rocket on hover.

#hover #gradient #transform

Live preview Buttons

Laurel

Laurel-leaf button with a regal green crown.

#hover #gradient #transform

Live preview Buttons

Lava Glow Button

Volcanic button with molten lava glowing through cracks.

#animation #gradient #shadow

Live preview Buttons

Lavender Bloom

Soft lavender-purple with bloom halo.

#hover #gradient #transform

Live preview Buttons

Lavender Mist

Soft lavender button with a misty bloom halo.

#hover #gradient #transform

Live preview Buttons

Lazurite

Lapis-lazurite blue with golden flecks.

#hover #gradient #shadow

Live preview Buttons

Leaf Vein Button

Leaf-shaped button with a central vein on hover.

#hover #gradient #shadow

Live preview Buttons

Ledge Edge Button

Stone button with a sharp 3D ledge drop on hover.

#hover #gradient #transform

Live preview Buttons

Lemon Zest Button

Bright lemon-yellow button with a zesty pop on hover.

#hover #gradient #transform

Live preview Buttons

Lens Focus Button

Camera-lens button with an autofocus ring on hover.

#hover #animation #gradient

Live preview Buttons

Lichen Patch

Gray-green lichen patches on stone.

#hover #gradient #shadow

Live preview Buttons

Light Beam Button

Dark button with a vertical light beam shining down on hover.

#hover #gradient #transform

Live preview Buttons

Lighthouse

Lighthouse button with striped red-white tower.

#hover #gradient #transform

Live preview Buttons

Lilac Bloom Button

Soft lilac button with a blooming floral glow on hover.

#hover #gradient #transform

Live preview Buttons

Linear Bar Button

Sleek button with a horizontal progress bar fill on hover.

#hover #gradient #transform

Live preview Buttons

Lion Mane Button

Bold golden button ringed by a lion-mane frill on hover.

#hover #gradient #transform

Live preview Buttons

Liquid Mercury Button

Polished chrome mercury surface that flows continuously.

#gradient #animation #hover

Live preview Buttons

Llama Wool

Soft llama wool in cream-brown.

#hover #gradient #transform

Live preview Buttons

Lotus Bloom

Pale lotus-pink button with a soft bloom halo.

#hover #gradient #transform

Live preview Buttons

Lunar Tide

Lunar-tide button with a silver-moon shimmer.

#hover #gradient #transform

Live preview Buttons

Lynx Tuft

Tawny lynx-fawn with ear-tuft hint.

#hover #gradient #shadow

Live preview Buttons

Maelstrom

Maelstrom-whirlpool button with a swirling pattern.

#hover #animation #gradient

Live preview Buttons

Magnetic Cursor Button

Button with a spotlight that follows the cursor for a magnetic feel.

#gradient #hover #shadow

Live preview Buttons

Magnetic Slide Button

A diagonal gradient sheet slides across from the bottom-left corner on hover.

#hover #gradient #transform

Live preview Buttons

Magnolia

Creamy magnolia button with petal softness.

#hover #gradient #transform

Live preview Buttons

Mahogany Wood

Dark polished wood button with grain lines.

#hover #gradient #shadow

Live preview Buttons

Malachite Bands

Deep green gem with concentric band shimmer.

#hover #gradient #transform

Live preview Buttons

Malachite Streak

Banded malachite green with concentric streaks.

#hover #gradient #shadow

Live preview Buttons

Mallet

Wooden-mallet button with a soft удар feel.

#hover #gradient #shadow

Live preview Buttons

Mango Tropical

Ripe mango yellow-orange with red blush.

#hover #gradient #transform

Live preview Buttons

Maple Leaf

Red-orange maple leaf button.

#hover #gradient #shadow

Live preview Buttons

Marble Vein

White marble slab crossed by soft gray veins.

#hover #gradient #transform

Live preview Buttons

Marina

Marina button with calm harbor-blue surface.

#hover #gradient #transform

Live preview Buttons

Masonry

Masonry-button with staggered brick courses.

#hover #gradient #shadow

Live preview Buttons

Mauve Haze

Dusty mauve button with a hazy outline.

#hover #gradient #transform

Live preview Buttons

Meadow Grass

Wild meadow grass with flower dots.

#hover #gradient #shadow

Live preview Buttons

Mercury Bead

Liquid silver mercury button that wobbles on hover.

#hover #gradient #transform

Live preview Buttons

Mesh Gradient Button

Multi-blob radial mesh gradient that drifts underneath the label.

#gradient #animation #hover

Live preview Buttons

Meteor Burn

Meteor-button with a burning atmospheric glow.

#hover #gradient #transform

Live preview Buttons

Milky Way

Milky-way button with a diagonal band of stars.

#hover #gradient #transform

Live preview Buttons

Mineral Vein

Stone button with mineral quartz veins.

#hover #gradient #shadow

Live preview Buttons

Misty Drift

Pale foggy button with drifting cloud layers.

#animation #gradient #transform

Live preview Buttons

Miter Gauge

Miter-gauge button with angled measurement marks.

#hover #gradient #shadow

Live preview Buttons

Mojito Lime

Cool mint-lime button with condensation bubbles.

#hover #gradient #transform

Live preview Buttons

Mosaic Tile

Pixelated mosaic tiles of varied colors.

#hover #gradient #shadow

Live preview Buttons

Mosaic Tile

Mosaic-tile button with multi-colored chips.

#hover #gradient #transform

Popular tags