Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Sunken input field */ .input { border: 1px solid #ccc; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.06); padding: 8px 12px; border-radius: 4px; background: #fff; } .input:focus { border-color: #1a73e8; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.06), 0 0 0 3px rgb(26 115 232 / 0.25); } /* Pressed button */ .btn:active { box-shadow: inset 0 3px 6px rgb(0 0 0 / 0.2); transform: translateY(1px); } /* Top highlight + bottom shadow = embossed */ .embossed { box-shadow: inset 0 2px 3px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.15); background: #e0e0e0; border-radius: 8px; }
Result
Open