Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Subtle card elevation */ .card { box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.12); border-radius: 8px; padding: 1.5rem; } /* Medium elevation — floating button */ .fab { box-shadow: 0 4px 6px rgb(0 0 0 / 0.10), 0 1px 3px rgb(0 0 0 / 0.08); } .fab:hover { box-shadow: 0 10px 20px rgb(0 0 0 / 0.15), 0 3px 6px rgb(0 0 0 / 0.10); } /* Coloured shadow for brand buttons */ .btn-primary { background: #1a73e8; box-shadow: 0 4px 14px rgb(26 115 232 / 0.45); } /* No shadow — flat design */ .flat { box-shadow: none; }
Result
Open