Soft CSS Effects

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 gentle neumorphic lift for light surfaces.

A dark neumorphic shadow with restrained contrast.

A quiet colored halo for callouts and badges.

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.

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

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

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

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

Neon Radial is a electric neon energy gradient built with radial 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 Radial is a warm coral brightness gradient built with radial CSS syntax.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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