Interactive online courses HTML Academy
2026-03-09 10:56 Diff
https://htmlacademy.org/courses/advanced-styling/shadows/inner-shadow

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Inner Shadow

If you use the insetkeyword inbox-shadow, then the shadow will be displayed inside the element.

box-shadow: [inset] <— internal 5px — x-offset 10px — y-offset [2px] — feathering [3px] — stretch [red]; — color

inset is best placed either at the very beginning of the property or at the very end.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Inner Shadow</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn btn1" type="button">Button 1</button> <button class="btn btn2" type="button">Button 2</button> <button class="btn btn3" type="button">Button 3</button> </body> </html>

CSS

.btn1 { box-shadow: 5px 5px 0 0 #34495e; } .btn2 { box-shadow: 0 0 5px 0 #34495e; } .btn3 { box-shadow: 0 0 5px 3px #34495e; } body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 50px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; color: white; text-align: center; text-transform: uppercase; font: inherit; }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. Create an inner shadow that is cast inside the first button,
  2. Then create one for the second,
  3. and also create one for the third button.