Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
:root { --bg: #e0e5ec; --shadow-light: #ffffff; --shadow-dark: #a3b1c6; } /* Extruded element */ .neu-card { background: var(--bg); border-radius: 16px; padding: 2rem; box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light); } /* Inset / pressed element */ .neu-pressed { background: var(--bg); border-radius: 12px; padding: 1rem; box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light); } /* Extruded button that presses on :active */ .neu-btn { background: var(--bg); border: none; border-radius: 10px; padding: 0.75rem 1.5rem; cursor: pointer; box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light); } .neu-btn:active { box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light); }
Result
Open