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

Gym Split Card

Gym routine card with split day, exercises, sets and reps.

#gradient #shadow #border

Live preview Cards

Half-Elf Card

Half-elf card with versatile stats and charm trait.

#gradient #shadow #border

Live preview Cards

Half-Orc Card

Half-orc card with relentless endurance and savage attack.

#gradient #shadow #border

Live preview Cards

Halfling Card

Halfling card with lucky trait and nimble fingers.

#gradient #shadow #border

Live preview Cards

Halloween Card

Spooky Halloween card with pumpkin and bat accents.

#gradient #shadow #border

Live preview Cards

Health Bar Card

Floating health bar card with a chunky red bar, segment ticks, and a number.

#gradient #border

Live preview Cards

Heartbeat Pulse Card

Heartbeat monitor card with animated EKG line and BPM reading.

#animation #gradient #transform

Live preview Cards

Hero Card

Hero character card with portrait, class, and power stat.

#gradient #shadow #border

Live preview Cards

Hike Summit Card

Hiking summit card with elevation, distance, and trail rating.

#gradient #shadow #border

Live preview Cards

Historical Figure Card

Historical figure card with portrait, dates, and achievement.

#gradient #shadow #border

Live preview Cards

Hockey Match Card

Ice hockey match card with period and penalty timer.

#gradient #shadow #border

Live preview Cards

Holiday Special Card

Holiday special card with falling snow, evergreen border, and a wreath badge.

#animation #gradient #shadow

Live preview Cards

Holiday Card

Generic holiday card with snowflake and warm wishes.

#gradient #shadow #border

Live preview Cards

Holographic Card

Iridescent holographic card that shimmers with a moving rainbow gradient on hover.

#gradient #animation #hover

Live preview Cards

Hotel Room Card

Hotel room card with room number, floor, and key code.

#gradient #shadow #border

Live preview Cards

Open Hours Card

Store hours sign card with a hanging OPEN badge and a weekly schedule.

#gradient #shadow #border

Live preview Cards

Housewarming Card

Housewarming invite with home icon and new address.

#gradient #shadow #border

Live preview Cards

Hunt Season Card

Hunting season card with species, tags, and zone.

#gradient #shadow #border

Live preview Cards

Hurricane Card

Hurricane tracking card with category, wind speed, and pressure.

#gradient #shadow #border

Live preview Cards

Hydration Bottle Card

Hydration tracker with animated water bottle fill level.

#animation #gradient #transform

Live preview Cards

Ice Cream Card

Ice cream shop card with flavors list and toppings.

#gradient #shadow #border

Live preview Cards

Ice Cream Scoop Card

Ice cream scoop card with stacked flavors, toppings, and cone.

#gradient #shadow #border

Live preview Cards

ID Badge

Employee ID badge with a lanyard slot, photo placeholder and a barcode strip.

#gradient #shadow #border

Live preview Cards

Illusionist Card

Illusionist card with mirror images and trick spell.

#gradient #shadow #border

Live preview Cards

Info Tip Card

Info tip card with a blue i badge, a short tip, and a dismissible X button.

#gradient #shadow #border

Live preview Cards

Info Kiosk Card

Information kiosk card with map, brochure, and staff hours.

#gradient #shadow

Live preview Cards

Instagram Post Card

Instagram-style post card with profile row, square image, and like/comment bar.

#gradient #transform #shadow

Live preview Cards

Intern Card

Intern ID card with university, mentor, and semester tag.

#gradient #shadow #border

Live preview Cards

Inventory Slot Card

Inventory slot card with a beveled cell, item icon, and a quantity badge.

#gradient #shadow #border

Live preview Cards

Item Card

Inventory item card with icon, rarity border, and stats.

#gradient #shadow #border

Live preview Cards

Jewelry Box Trinket Card

Jewelry box card with open lid, ring, and velvet padding.

#gradient #transform #shadow

Live preview Cards

Journal Entry Page Card

Journal page card with date, mood, and handwritten-style entry.

#gradient #shadow #border

Live preview Cards

Juggler Card

Juggler performer card with multiple balls icon.

#gradient #shadow #border

Live preview Cards

Kayak Paddle Card

Kayak trip card with river class, distance, and paddle strokes.

#gradient #shadow #border

Live preview Cards

Keepsake Card

Heartfelt keepsake card with ribbon bow and dedication.

#gradient #shadow #border

Live preview Cards

Keto Recipe Card

Keto recipe card with low-carb indicator and macro breakdown.

#gradient #shadow #border

Live preview Cards

Keychain Tag Card

Personalized keychain tag card with name engraving and ring.

#gradient #shadow #border

Live preview Cards

Keynote Pass

Keynote pass with spotlight, headliner name, and stage time.

#gradient #shadow #border

Live preview Cards

Kickstarter Backer Card

Kickstarter backer pledge card with reward tier, funding progress, and backers.

#gradient #shadow #border

Live preview Cards

Kiteboard Card

Kiteboarding session card with wind speed, kite size, and tricks.

#gradient #shadow

Live preview Cards

Knight Card

Knight card with armor, sword, and shield crest.

#gradient #shadow #border

Live preview Cards

Landmark Card

Landmark info card with icon, history, and visitor tip.

#gradient #shadow #border

Live preview Cards

Landmark Statue Card

Landmark statue card with height, material, and year built.

#gradient #shadow #border

Live preview Cards

Legendary Aura Card

Legendary card with a rotating golden aura, ornate corners, and a hero portrait.

#animation #gradient #transform

Live preview Cards

Level Up Card

Level-up celebration card with a burst of rays, big level number, and confetti.

#animation #gradient #transform

Live preview Cards

Level Up Card

Level up celebration card with arrow, new level, and stat boost.

#gradient #shadow #border

Live preview Cards

Library Borrow Card

Library book checkout card with title, due date, and renewal option.

#gradient #transform #shadow

Live preview Cards

Driver License

Driver license card with a photo, personal info fields and an animated hologram strip.

#gradient #animation #shadow

Live preview Cards

Driver License

Driver license card with a state header, photo, signature line, and class.

#gradient #shadow #border

Live preview Cards

Limited Edition Card

Limited edition card with a stamped serial number, foil seal, and gold trim.

#gradient #transform #shadow

Live preview Cards

Limited Pass Card

Limited edition pass card with low stock warning.

#gradient #shadow #border

Live preview Cards

Live Stream Card

Live stream card with red LIVE badge and viewer count.

#gradient #shadow

Live preview Cards

Location Pin Card

Map location card with a pin marker, address, distance, and a get-directions link.

#animation #gradient #transform

Live preview Cards

Lottery Card

Lottery slip with numbered balls, a bonus star, and a serialized ticket code.

#gradient #shadow #border

Live preview Cards

Lounge Access Card

Airport lounge access card with membership tier and rules.

#gradient #shadow #border

Live preview Cards

Loyalty Card

Store loyalty card with member number and points balance.

#gradient #shadow #border

Live preview Cards

Luggage Tag

Leather luggage tag with a strap loop, stamped initials, and destination field.

#gradient #transform #shadow

Live preview Cards

Luggage Tag Card

Luggage tag card with destination, flight, and weight.

#gradient #shadow #border

Live preview Cards

Magazine Cover Card

Magazine cover card with masthead, cover line, and barcode strip at the bottom.

#gradient #shadow

Live preview Cards

Magazine Cover Card

Magazine cover card with masthead, cover line, and barcode.

#gradient #shadow #border

Live preview Cards

Magazine Issue Cover Card

Magazine cover card with masthead, issue title, and feature headlines.

#gradient #shadow #border

Live preview Cards

Magic Spell Card

Magic the Gathering style spell with mana cost and effect.

#gradient #shadow #border

Live preview Cards

Magician Card

Magician card with hat and rabbit icon, mystic theme.

#gradient #shadow #border

Live preview Cards

Magnet Card

Magnet card with north/south poles and field lines.

#gradient #shadow #border

Live preview Cards

Magnetic Stripe Card

Magnetic stripe card with a dark magstripe, signature panel, and card number.

#gradient #transform #shadow

Live preview Cards

Makeup Palette Swatches Card

Makeup palette card with color swatches and shade names.

#gradient #shadow

Live preview Cards

Mana Bar Card

Mana bar card with a glowing blue fill, shimmer animation, and a numeric label.

#animation #gradient #transform

Live preview Cards

Geography Map Card

Geography map card with country, capital, and continent.

#gradient #shadow #border

Live preview Cards

Marathon Finish Card

Marathon finisher card with bib, splits, and pace.

#gradient #shadow

Live preview Cards

Math Graph Card

Math graph card with function and plotted line.

#gradient #shadow #border

Live preview Cards

Meal Planner Week Card

Weekly meal planner card with day grid and meal assignments.

#gradient #shadow

Live preview Cards

Medal Card

Medal card with a ribbed ribbon, polished metal disc, and an embossed star.

#gradient #shadow

Live preview Cards

Medication Dose Card

Medication dose tracker with pill name, dosage, frequency, and next time.

#gradient #shadow

Live preview Cards

Meditation Bell Card

Meditation session card with breathing circle and timer.

#animation #gradient #transform

Live preview Cards

Meetup Card

Casual meetup card with location pin, date, and RSVP count.

#gradient #shadow

Live preview Cards

Membership Card

Premium membership card with a gold tier badge, chip, member name and join year.

#gradient #shadow #border

Live preview Cards

Premium Membership Card

Premium membership card with tier stars and member since date.

#gradient #shadow #border

Live preview Cards

Memorabilia Card

Sports memorabilia card with jersey number and authentication.

#gradient #shadow #border

Live preview Cards

Mermaid Card

Mermaid card with ocean waves and siren call.

#gradient #shadow #border

Live preview Cards

Mini-Boss Card

Mini-boss card with elite stats and guard ability.

#gradient #shadow #border

Live preview Cards

MMA Bout Card

MMA fight card with fighter records and weight class.

#gradient #shadow #border

Live preview Cards

Monk Card

Monk card with ki points and martial arts.

#gradient #shadow #border

Live preview Cards

Monster Card

Generic monster card with type, CR, and habitat.

#gradient #shadow #border

Live preview Cards

Moon Phase Card

Moon phase card with current phase, illumination, and cycle.

#gradient #shadow #border

Live preview Cards

Mother's Day Card

Mother's Day card with flower bouquet and loving message.

#gradient #shadow #border

Live preview Cards

Movie Ticket

Cinema admission stub with perforated top/bottom edges and a golden rating badge.

#gradient #shadow #border

Live preview Cards

Museum Exhibit Card

Museum exhibit card with artifact name, era, and gallery number.

#gradient #shadow #border

Live preview Cards

Music Player

Compact music player card with album art, an animated progress bar and playback controls.

#gradient #animation #shadow

Live preview Cards

Music Player Card

Music player widget with album art, track name, and controls.

#gradient #shadow

Live preview Cards

Mystic Rune Card

Mystic card with a slowly rotating rune circle and a glowing central sigil.

#animation #gradient #transform

Live preview Cards

Name Tag

Conference name tag with a HELLO header, big name, and a pin detail.

#gradient #transform #shadow

Live preview Cards

NASCAR Lap Card

NASCAR race card with lap count, position, and track segment.

#gradient #shadow

Live preview Cards

National Park Card

National park card with area, established year, and visitors.

#gradient #shadow #border

Live preview Cards

Necromancer Card

Necromancer card with skull icon and undead minions.

#gradient #shadow #border

Live preview Cards

Neumorphic Card

Soft UI neumorphic card with dual light/dark shadows that presses in on hover.

#gradient #hover #shadow

Popular tags