CSS Effects Gallery

A barely raised surface shadow for quiet cards.

A balanced low elevation shadow for panels and menus.

A wider ambient shadow that stays restrained.

A smoother landing shadow for larger interface blocks.

A deep but diffused shadow for modal-like surfaces.

A crisp paper edge with a small contact shadow.

A layered paper effect for document-style cards.

A polished editorial paper shadow with visible depth.

A compact material-style shadow for small controls.

A low material elevation for raised cards.

A confident material surface shadow.

A medium material shadow for layered panels.

A stronger elevation for popovers and dropdowns.

A clear foreground shadow for floating widgets.

A high elevation for command palettes.

A dramatic material-style overlay shadow.

A gentle neumorphic lift for light surfaces.

An inset pressed effect for light UI controls.

A dark neumorphic shadow with restrained contrast.

A sunken dark control shadow for toggles.

A two-direction ridge for beveled settings panels.

A concave neumorphic surface with subtle inner weight.

A saturated cyan-blue glow for dark interfaces.

A hot pink glow for expressive highlights.

An electric green glow for terminal-inspired UI.

A quiet colored halo for callouts and badges.

A tighter glow with a vivid edge.

A violet aura with enough spread for feature cards.

A cool orbit-style glow around compact elements.

A warm ember shadow for active states.

A multi-layer card shadow with clear ambient depth.

A stepped shadow for panels that hover above the page.

A publication-style stack with a visible paper edge.

A composed dashboard shadow for dense data cards.

A broad stage-like ambient shadow for hero modules.

A delicate layered shadow with very light contact.

A hard offset shadow with poster-like contrast.

A stark double edge for brutalist cards.

A bold colorful offset for playful buttons.

A squared-off shadow for structured layouts.

A dense block shadow for terminal-inspired panels.

A warm tinted shadow for cream or coral surfaces.

A cold blue tint that works well on dashboards.

A brand-friendly teal shadow with modern softness.

A rose-tinted shadow for expressive UI surfaces.

A restrained golden shadow for premium accents.

A subtle inset shadow for input fields.

A deeper inset shadow for recessed panels.

An inset shadow with a small top highlight.

A colored inset glow for selected controls.

Triangle Classic is clean geometric clipping for CSS clip-path layouts.

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

Triangle Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Triangle Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Triangle Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Triangle Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Hexagon Classic is clean geometric clipping for CSS clip-path layouts.

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

Hexagon Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Hexagon Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Hexagon Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Hexagon Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Octagon Classic is clean geometric clipping for CSS clip-path layouts.

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

Octagon Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Octagon Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Octagon Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Octagon Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Pentagon Classic is clean geometric clipping for CSS clip-path layouts.

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

Pentagon Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Pentagon Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Pentagon Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Pentagon Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Star Classic is clean geometric clipping for CSS clip-path layouts.

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

Star Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Star Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Star Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Star Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Arrow Right Classic is clean geometric clipping for CSS clip-path layouts.

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

Arrow Right Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Arrow Right Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Arrow Right Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Arrow Right Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Arrow Left Classic is clean geometric clipping for CSS clip-path layouts.

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

Arrow Left Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Arrow Left Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Arrow Left Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Arrow Left Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Parallelogram Classic is clean geometric clipping for CSS clip-path layouts.

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

Parallelogram Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Parallelogram Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Parallelogram Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Parallelogram Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Trapezoid Classic is clean geometric clipping for CSS clip-path layouts.

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

Trapezoid Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Trapezoid Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Trapezoid Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Trapezoid Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

Message Bubble Classic is clean geometric clipping for CSS clip-path layouts.

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

Message Bubble Sharp is a dramatic decorative silhouette for CSS clip-path layouts.

Message Bubble Banner is a wide cut designed for headers and ribbons for CSS clip-path layouts.

Message Bubble Divider is an edge-forward crop for page dividers for CSS clip-path layouts.

Message Bubble Compact is a tight badge-like shape for small UI accents for CSS clip-path layouts.

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

Frost Panel is a clear frosted white surface with 24px backdrop blur.

Frost Sheet is a clear frosted white surface with 30px backdrop blur.

Frost Pill is a clear frosted white surface with 16px backdrop blur.

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

Mist Panel is a cool blue-tinted glass layer with 24px backdrop blur.

Mist Sheet is a cool blue-tinted glass layer with 30px backdrop blur.

Mist Pill is a cool blue-tinted glass layer with 16px backdrop blur.

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

Graphite Panel is a dark translucent graphite pane with 24px backdrop blur.

Graphite Sheet is a dark translucent graphite pane with 30px backdrop blur.

Graphite Pill is a dark translucent graphite pane with 16px backdrop blur.

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

Teal Panel is a brand-friendly teal glass surface with 24px backdrop blur.

Teal Sheet is a brand-friendly teal glass surface with 30px backdrop blur.

Teal Pill is a brand-friendly teal glass surface with 16px backdrop blur.

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

Violet Panel is a violet wash for expressive panels with 24px backdrop blur.

Violet Sheet is a violet wash for expressive panels with 30px backdrop blur.

Violet Pill is a violet wash for expressive panels with 16px backdrop blur.

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

Amber Panel is a warm amber tint for highlight cards with 24px backdrop blur.

Amber Sheet is a warm amber tint for highlight cards with 30px backdrop blur.

Amber Pill is a warm amber tint for highlight cards with 16px backdrop blur.

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

Rose Panel is a rose-tinted glass style for accents with 24px backdrop blur.

Rose Sheet is a rose-tinted glass style for accents with 30px backdrop blur.

Rose Pill is a rose-tinted glass style for accents with 16px backdrop blur.

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

Slate Panel is a neutral smoked-glass treatment with 24px backdrop blur.

Slate Sheet is a neutral smoked-glass treatment with 30px backdrop blur.

Slate Pill is a neutral smoked-glass treatment with 16px backdrop blur.

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

Cyan Panel is a bright cyan panel with crisp edges with 24px backdrop blur.

Cyan Sheet is a bright cyan panel with crisp edges with 30px backdrop blur.

Cyan Pill is a bright cyan panel with crisp edges with 16px backdrop blur.

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

Pearl Panel is a pale pearl surface for quiet UI with 24px backdrop blur.

Pearl Sheet is a pale pearl surface for quiet UI with 30px backdrop blur.

Pearl Pill is a pale pearl surface for quiet UI with 16px backdrop blur.

Aurora Linear is a cool aurora color movement gradient built with linear CSS syntax.

Aurora Radial is a cool aurora color movement gradient built with radial CSS syntax.

Aurora Conic is a cool aurora color movement gradient built with conic CSS syntax.

Aurora Diagonal is a cool aurora color movement gradient built with linear CSS syntax.

Sunset Linear is a warm sunset contrast gradient built with linear CSS syntax.

Sunset Radial is a warm sunset contrast gradient built with radial CSS syntax.

Sunset Conic is a warm sunset contrast gradient built with conic CSS syntax.

Sunset Diagonal is a warm sunset contrast gradient built with linear CSS syntax.

Ocean Linear is a deep ocean color flow gradient built with linear CSS syntax.

Ocean Radial is a deep ocean color flow gradient built with radial CSS syntax.

Ocean Conic is a deep ocean color flow gradient built with conic CSS syntax.

Ocean Diagonal is a deep ocean color flow gradient built with linear CSS syntax.

Lagoon Linear is a bright lagoon freshness gradient built with linear CSS syntax.

Lagoon Radial is a bright lagoon freshness gradient built with radial CSS syntax.

Lagoon Conic is a bright lagoon freshness gradient built with conic CSS syntax.

Lagoon Diagonal is a bright lagoon freshness gradient built with linear CSS syntax.

Neon Linear is a electric neon energy gradient built with linear CSS syntax.

Neon Radial is a electric neon energy gradient built with radial CSS syntax.

Neon Conic is a electric neon energy gradient built with conic CSS syntax.

Neon Diagonal is a electric neon energy gradient built with linear CSS syntax.

Pastel Linear is a soft pastel blending gradient built with linear CSS syntax.

Pastel Radial is a soft pastel blending gradient built with radial CSS syntax.

Pastel Conic is a soft pastel blending gradient built with conic CSS syntax.

Pastel Diagonal is a soft pastel blending gradient built with linear CSS syntax.

Coral Linear is a warm coral brightness gradient built with linear CSS syntax.

Coral Radial is a warm coral brightness gradient built with radial CSS syntax.

Coral Conic is a warm coral brightness gradient built with conic CSS syntax.

Coral Diagonal is a warm coral brightness gradient built with linear CSS syntax.

Forest Linear is a green forest depth gradient built with linear CSS syntax.

Forest Radial is a green forest depth gradient built with radial CSS syntax.

Forest Conic is a green forest depth gradient built with conic CSS syntax.

Forest Diagonal is a green forest depth gradient built with linear CSS syntax.

Steel Linear is a cool steel interface tone gradient built with linear CSS syntax.

Steel Radial is a cool steel interface tone gradient built with radial CSS syntax.

Steel Conic is a cool steel interface tone gradient built with conic CSS syntax.

Steel Diagonal is a cool steel interface tone gradient built with linear CSS syntax.

Berry Linear is a berry-toned color lift gradient built with linear CSS syntax.

Berry Radial is a berry-toned color lift gradient built with radial CSS syntax.

Berry Conic is a berry-toned color lift gradient built with conic CSS syntax.

Berry Diagonal is a berry-toned color lift gradient built with linear CSS syntax.

Citrus Linear is a sharp citrus freshness gradient built with linear CSS syntax.

Citrus Radial is a sharp citrus freshness gradient built with radial CSS syntax.

Citrus Conic is a sharp citrus freshness gradient built with conic CSS syntax.

Citrus Diagonal is a sharp citrus freshness gradient built with linear CSS syntax.

Dusk Linear is a late dusk saturation gradient built with linear CSS syntax.

Dusk Radial is a late dusk saturation gradient built with radial CSS syntax.

Dusk Conic is a late dusk saturation gradient built with conic CSS syntax.

Dusk Diagonal is a late dusk saturation gradient built with linear CSS syntax.

Lava Linear is a hot lava contrast gradient built with linear CSS syntax.

Lava Radial is a hot lava contrast gradient built with radial CSS syntax.

Lava Conic is a hot lava contrast gradient built with conic CSS syntax.

Lava Diagonal is a hot lava contrast gradient built with linear CSS syntax.

Ice Linear is a clean icy brightness gradient built with linear CSS syntax.

Ice Radial is a clean icy brightness gradient built with radial CSS syntax.

Ice Conic is a clean icy brightness gradient built with conic CSS syntax.

Ice Diagonal is a clean icy brightness gradient built with linear CSS syntax.

Mint Linear is a mint glass freshness gradient built with linear CSS syntax.

Mint Radial is a mint glass freshness gradient built with radial CSS syntax.

Mint Conic is a mint glass freshness gradient built with conic CSS syntax.

Mint Diagonal is a mint glass freshness gradient built with linear CSS syntax.

Royal Linear is a royal violet depth gradient built with linear CSS syntax.

Royal Radial is a royal violet depth gradient built with radial CSS syntax.

Royal Conic is a royal violet depth gradient built with conic CSS syntax.

Royal Diagonal is a royal violet depth gradient built with linear CSS syntax.

Flame Linear is a flame-like warmth gradient built with linear CSS syntax.

Flame Radial is a flame-like warmth gradient built with radial CSS syntax.

Flame Conic is a flame-like warmth gradient built with conic CSS syntax.

Flame Diagonal is a flame-like warmth gradient built with linear CSS syntax.

Candy Linear is a playful candy color gradient built with linear CSS syntax.

Candy Radial is a playful candy color gradient built with radial CSS syntax.

Candy Conic is a playful candy color gradient built with conic CSS syntax.

Candy Diagonal is a playful candy color gradient built with linear CSS syntax.

Vapor Linear is a retro vapor glow gradient built with linear CSS syntax.

Vapor Radial is a retro vapor glow gradient built with radial CSS syntax.

Vapor Conic is a retro vapor glow gradient built with conic CSS syntax.

Vapor Diagonal is a retro vapor glow gradient built with linear CSS syntax.

Meadow Linear is a open meadow brightness gradient built with linear CSS syntax.

Meadow Radial is a open meadow brightness gradient built with radial CSS syntax.

Meadow Conic is a open meadow brightness gradient built with conic CSS syntax.

Meadow Diagonal is a open meadow brightness gradient built with linear CSS syntax.

Midnight Linear is a midnight blue drama gradient built with linear CSS syntax.

Midnight Radial is a midnight blue drama gradient built with radial CSS syntax.

Midnight Conic is a midnight blue drama gradient built with conic CSS syntax.

Midnight Diagonal is a midnight blue drama gradient built with linear CSS syntax.

Sunrise Linear is a early sunrise softness gradient built with linear CSS syntax.

Sunrise Radial is a early sunrise softness gradient built with radial CSS syntax.

Sunrise Conic is a early sunrise softness gradient built with conic CSS syntax.

Sunrise Diagonal is a early sunrise softness gradient built with linear CSS syntax.

Peacock Linear is a peacock-toned richness gradient built with linear CSS syntax.

Peacock Radial is a peacock-toned richness gradient built with radial CSS syntax.

Peacock Conic is a peacock-toned richness gradient built with conic CSS syntax.

Peacock Diagonal is a peacock-toned richness gradient built with linear CSS syntax.

Ember Linear is a low ember warmth gradient built with linear CSS syntax.

Ember Radial is a low ember warmth gradient built with radial CSS syntax.

Ember Conic is a low ember warmth gradient built with conic CSS syntax.

Ember Diagonal is a low ember warmth gradient built with linear CSS syntax.

Electric Linear is a electric blue-green snap gradient built with linear CSS syntax.

Electric Radial is a electric blue-green snap gradient built with radial CSS syntax.

Electric Conic is a electric blue-green snap gradient built with conic CSS syntax.

Electric Diagonal is a electric blue-green snap gradient built with linear CSS syntax.