Card CSS Effects

A barely raised surface shadow for quiet cards.

A low material elevation for raised cards.

A multi-layer card shadow with clear ambient depth.

Triangle Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Hexagon Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Octagon Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Pentagon Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Star Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Arrow Right Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Arrow Left Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Parallelogram Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Trapezoid Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Message Bubble Soft is a safer crop with less aggressive corners for CSS clip-path layouts.

Frost Card is a clear frosted white surface with 18px backdrop blur.

Mist Card is a cool blue-tinted glass layer with 18px backdrop blur.

Graphite Card is a dark translucent graphite pane with 18px backdrop blur.

Teal Card is a brand-friendly teal glass surface with 18px backdrop blur.

Violet Card is a violet wash for expressive panels with 18px backdrop blur.

Amber Card is a warm amber tint for highlight cards with 18px backdrop blur.

Rose Card is a rose-tinted glass style for accents with 18px backdrop blur.

Slate Card is a neutral smoked-glass treatment with 18px backdrop blur.

Cyan Card is a bright cyan panel with crisp edges with 18px backdrop blur.

Pearl Card is a pale pearl surface for quiet UI with 18px backdrop blur.