Adding a shadow on the inside of a shape instead of outside?

2 weeks ago 22
ARTICLE AD BOX

UPDATE -- I did a little more research and found how to do it through a CSS Generator!


I'm currently working on my first ever project! (yay!) My plan is for it to be an Ipod Classic but I can't exactly figure out how to make the shadow go inward on the rectangle instead of outside. My progress so far.


What have I already tried?


Currently, I've attempted these two codes.

box-shadow: inset 4px 4px 15px rgba(255, 255, 255, 0.3); box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.5);

Neither have worked.


My code.


index.html;; <!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="rectangle"></div> </body> </html> style.css;; body { background-color: black; display: grid; place-items: center; min-height: 100vh; margin: 0; } #rectangle { width: 300px; height: 500px; background:rgb(192, 192, 192); border-radius: 25px; padding: 20px; }
Read Entire Article