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

Live preview Cards

New Arrival Tag

Product card with a diagonal NEW ARRIVAL corner ribbon and a soft image block.

#gradient #transform #shadow

Live preview Cards

New Home Card

New home card with a house illustration, key, and a welcoming message.

#animation #gradient #transform

Live preview Cards

New Year Card

New Year card with fireworks and bold year text.

#gradient #shadow #border

Live preview Cards

Newspaper Clipping Card

Newspaper clipping card with masthead, headline, and column text.

#gradient #shadow #border

Live preview Cards

NFT Display Card

NFT card with a generative art tile, token ID, and a floor price tag.

#gradient #transform #shadow

Live preview Cards

Nitrogen Cycle Card

Nitrogen cycle card with fixation, nitrification, and denitrification.

#gradient #shadow #border

Live preview Cards

Notification Toast

Slide-in notification toast with an app icon, title, message and timestamp.

#gradient #animation #shadow

Live preview Cards

Notification Settings Card

Notification settings card with app list and toggles.

#gradient #shadow #border

Live preview Cards

Now Playing Card

Compact now playing card with track, artist, and progress.

#gradient #shadow #filter

Live preview Cards

NPC Card

NPC card with portrait, name, and dialogue hint.

#gradient #shadow #border

Live preview Cards

Ogre Card

Ogre card with massive club and brute strength.

#gradient #shadow #border

Live preview Cards

Onboarding Card

App onboarding card with illustration, title, and skip button.

#gradient #shadow #border

Live preview Cards

Online Status Card

Online status card with avatar, dot indicator, and activity.

#animation #gradient #shadow

Live preview Cards

Open Beta Card

Open beta card with public access and feedback link.

#gradient #shadow #border

Live preview Cards

Opera Ticket

Gold opera ticket with serif typography, ornate border, and box number.

#gradient #shadow #border

Live preview Cards

Prism Optics Card

Prism optics card showing white light splitting into spectrum.

#gradient #shadow #border

Live preview Cards

Orc Card

Orc card with brutal weapon and aggressive trait.

#gradient #shadow #border

Live preview Cards

Order Confirmation Card

Order confirmation with order number, status, and ETA.

#gradient #shadow #border

Live preview Cards

Organizer Pass

Organizer pass with clipboard icon and all-area clearance.

#gradient #shadow #border

Live preview Cards

Origami Fold Card

Card with diagonal origami fold panels that subtly shift on hover for a paper feel.

#gradient #hover #shadow

Live preview Cards

Out of Stock Card

Out of stock card with a greyscale image, diagonal SOLD OUT banner, and restock note.

#gradient #transform #shadow

Live preview Cards

Oil Painting Canvas

Framed oil painting with an ornate gold frame, canvas texture and an engraved plaque.

#gradient #shadow #border

Live preview Cards

Painting Canvas Card

Gallery painting card with wood frame and signature.

#gradient #shadow

Live preview Cards

Paladin Card

Paladin card with holy aura and divine smite.

#gradient #shadow #border

Live preview Cards

Paleo Snack Card

Paleo snack card with primal icon and ingredient tagline.

#gradient #shadow #border

Live preview Cards

Pantry Shelf Card

Pantry inventory card with shelves of items, quantities, and expiry.

#gradient #shadow

Live preview Cards

Parking Pass Card

Parking pass card with a hanging tag shape, zone color, and license plate.

#gradient #transform #shadow

Live preview Cards

Passport Cover

National passport cover with a gold crest, country name and multi-language title.

#gradient #shadow #border

Live preview Cards

Passport Stamp Card

Passport stamp card with country, date, and entry mark.

#gradient #transform #shadow

Live preview Cards

Pedometer Card

Step counter card with circular progress and distance stats.

#gradient #transform #shadow

Live preview Cards

Peel Corner Card

Card whose top-right corner peels back on hover to reveal a hidden layer beneath.

#gradient #hover #3d

Live preview Cards

Performer Pass

Performer pass with star icon and stage access level.

#gradient #shadow #border

Live preview Cards

Perfume Bottle Spray Card

Perfume bottle card with fragrance name, notes, and spray mist.

#animation #gradient #transform

Live preview Cards

Periodic Element Card

Periodic table element card with symbol, atomic number, and mass.

#gradient #shadow #border

Live preview Cards

pH Scale Card

pH scale card with acid, neutral, and base markers.

#gradient #shadow

Live preview Cards

Phoenix Card

Phoenix card with flame motif and rebirth tag.

#gradient #shadow #border

Live preview Cards

Photo Album Card

Photo album page with corner mounts and a centered photo.

#gradient #shadow #border

Live preview Cards

Photo Print Card

Photo print card with a glossy image, white border, and a handwritten caption.

#gradient #transform #shadow

Live preview Cards

Photo Collage Grid Card

Photo collage card with grid of differently sized image tiles.

#gradient #shadow

Live preview Cards

Wooden Photo Frame

Photo in a textured wooden frame with a beveled inner edge and a brass caption plate.

#gradient #shadow #border

Live preview Cards

Photo Grid Card

Photo grid card with image tiles and selection highlight.

#gradient #shadow

Live preview Cards

Photo Print Develop Card

Polaroid-style photo print card with developing image and date caption.

#gradient #shadow #filter

Live preview Cards

Photo Booth Strip Card

Photo booth strip card with four stacked frames and a hand-drawn caption.

#gradient #shadow #filter

Live preview Cards

Chess Piece Card

Chess piece card with silhouette, name, and value.

#gradient #shadow #border

Live preview Cards

Pilates Reformer Card

Pilates reformer class card with spring load and exercise sequence.

#gradient #shadow #border

Live preview Cards

Pin Button Card

Collectible pin button card with a glossy disc, shine highlight, and pin back.

#gradient #transform #shadow

Live preview Cards

PIN Pad Card

PIN pad card with number grid and dots indicator.

#gradient #shadow #border

Live preview Cards

Pinball Card

Pinball machine card with score, ball count, and high score.

#gradient #shadow #border

Live preview Cards

Table Tennis Card

Table tennis match card with set scores and serve indicator.

#gradient #shadow #border

Live preview Cards

Pizza Menu Card

Pizza menu card with slice icon and topping options.

#gradient #shadow #border

Live preview Cards

Pizza Toppings Card

Pizza builder card with crust, sauce, cheese, and toppings arranged circularly.

#gradient #shadow

Live preview Cards

Planet Card

Planet card with name, distance, and key facts.

#gradient #shadow #border

Live preview Cards

Plant Watering Card

Plant care card with watering schedule and moisture indicator.

#gradient #transform #shadow

Live preview Cards

Museum Plaque

Wall-mounted museum plaque with engraved brass text and four mounting screws.

#gradient #shadow #border

Live preview Cards

Playlist Card

Curated playlist card with cover grid and song count.

#gradient #shadow

Live preview Cards

Pocket Monster Card

Colorful creature card with HP bar, energy symbols, and a move description box.

#gradient #shadow #border

Live preview Cards

Podcast Card

Podcast episode card with cover art, play button, duration, and episode number.

#gradient #shadow

Live preview Cards

Podcast Episode Card

Podcast episode card with cover, episode number, and play button.

#gradient #shadow

Live preview Cards

Podcast Mini Card

Podcast mini card with cover, episode title, and play button.

#gradient #shadow #border

Live preview Cards

Podcast Player Card

Podcast player card with episode info and progress.

#gradient #shadow #border

Live preview Cards

Pokedex Entry Card

Pokedex-style creature entry with sprite, type, and stats.

#gradient #shadow #border

Live preview Cards

Pokemon Trade Card

Pokemon trade card with CP, type, and trainer tag.

#gradient #shadow #border

Live preview Cards

Polaroid Photo

Classic polaroid photo card with a white frame, image area and a handwritten caption.

#gradient #hover #3d

Popular tags