Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Two-layer shadow — close sharp + far soft */ .card { box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 4px 12px rgb(0 0 0 / 0.10); } /* Three-layer Material Design-style elevation */ .elevated { box-shadow: 0 2px 4px rgb(0 0 0 / 0.07), 0 4px 8px rgb(0 0 0 / 0.07), 0 16px 24px rgb(0 0 0 / 0.07); } /* Shadow as a fake border (no layout impact) */ .focus-ring:focus { box-shadow: 0 0 0 3px #fff, /* white gap */ 0 0 0 6px #1a73e8; /* coloured ring */ outline: none; } /* Pressed button state with inset + outer shadow */ .btn:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.20), 0 1px 2px rgb(0 0 0 / 0.08); transform: translateY(1px); }
Result
Open