CSS Cards Effects

A gradient card that rises on hover with an intensifying colored shadow for a tactile floating effect.

A frosted glass card with backdrop blur sitting over a colorful gradient plate — the classic iOS-style material.

A soft extruded card with dual light/dark shadows that invert into an inset on hover for a pressed feel.

A dark card where a cyan spotlight follows the cursor, revealing the surface only where you point. (Move your mouse over it.)

A card that rotates 180° on the Y axis when hovered, revealing a different face on the back.

A dark card framed by an animated four-color gradient ring that continuously morphs via a mask trick.

A violet gradient card that tilts in 3D space on hover, with title and subtitle lifted at different depths.

An indigo card that breathes — its outer glow softly expands and contracts on a steady loop, calling attention without motion noise.

Slate surface card with a blue top accent bar; lifts with colored shadow on hover.

Slate card with an animated ocean gradient border that shifts continuously.

Frosted glass card with an ocean radial glow behind the content.

Dashboard tile with a hairline ring, a lit top edge and an ocean corner bloom — the bento-grid unit.

Ocean gradient card with an inline SVG noise overlay — the fix for gradient banding on 8-bit displays.

Feature card that lights an ocean spotlight behind its top edge on hover — no pointer tracking, no JavaScript.

The highlighted tier in a pricing table: ocean gradient ring, floating badge, CSS-drawn checkmarks.

Stacked ocean card that fans its two layers out from underneath when hovered.

Metric tile with a delta pill and an eight-bar sparkline drawn in CSS, so the trend needs no charting library and no SVG.

Testimonial with the opening mark hung outside the text block and clipped to a gradient, marked up as a real figure and blockquote.

Inbox rows where unread state is carried by a left rail, a faint tint and a dot at once, so it survives being skimmed at any zoom.

Placeholder panel with a dashed edge that reads as a slot waiting to be filled, the plus glyph tilting on hover so the whole card behaves like one target.

Current conditions weighted large over a four-day strip, the whole panel tinted by the same hue as the sun mark so the card reads as one sky rather than a chart.

A tabbed folder card that tips its front open on hover while the paper inside slides up out of it.

Service card that keeps its action row rolled away until hover, when the footer unrolls to reveal three controls.

Ruled paper note held by a single push pin, pivoting about the pin head as its transform origin so it swings past level and settles rather than tilting in place.

Cover banner with an avatar pulled up over the seam by a negative margin, so the ring sits half on the gradient and half on the body.

Commerce tile with a corner flag, price and rating on one baseline, and a full-width action — the four things a grid card has to carry.

Course-style tile that leads with how much is left rather than what it is, the meter animating to its real position once so a reduced-motion reader still sees 44 percent.

Player row where the level meter runs on negative animation delays, so the twelve bars start mid-cycle and never line up into a visible wave.

A trading-card style tile whose iridescent foil sheen slides across and brightens when hovered.

Note card with its top-right corner turned down to a coloured underside, the fold growing larger as the card lifts on hover.

A payment card tucked into a pocket with a semicircular thumb notch cut out of its top edge, riding up out of the sleeve on hover to show the full number.

A card that rotates around its vertical axis on hover to show a solid-colored back face.

Paper till receipt in monospace with dashed rules, a totals line and a zigzag torn edge cut into the bottom by a mask.

Drafting sheet on gridded blueprint paper with a hatched part and a title block, whose width and height dimension lines extend from their witness ticks and print their measurements when hovered.

An event ticket with notched edges and a perforated line whose stub tears away slightly on hover.

Content card topped by a four-point mesh gradient whose colour blobs drift slowly against each other behind a pill label.

Compact cassette with a written label and a window onto two spoked hubs that turn continuously while the wound tape thickens on one reel and thins on the other.

A media card where only the title peeks up from the bottom until hover slides the full caption into view.

A mock terminal card with traffic-light dots and a prompt whose cursor starts blinking on hover.