Einen Schatten auf der Innenseite einer Form hinzufügen statt auf der Außenseite? ⇐ HTML

[Anonymous]

Ich arbeite derzeit an meinem allerersten Projekt! (Juhu!) Mein Plan ist, dass es ein Ipod Classic wird, aber ich kann nicht genau herausfinden, wie ich den Schatten auf dem Rechteck nach innen statt nach außen verschieben kann.
Mein bisheriger Fortschritt:



Was ich schon habe versucht?

Derzeit habe ich diese beiden Codes ausprobiert.

Code: Select all

    box-shadow: inset 4px 4px 15px rgba(255, 255, 255, 0.3);

box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.5);

Beides hat nicht funktioniert.

Mein Code.

Code: Select all

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;

}

Code: Select all