CSS Box Shadows

Question

Can someone help me with what I'm doing wrong in the CSS code below, I want to learn and I want to make what is in the attached image. The instructions are: Styles:

• width: 400 px,
• height: 100 px,
• background color: beige,
• shadow - centered, 5 px blur, 5 px shadow width, color rgba (0,0,0,0.3),
• horizontally centered text, font size 50 px, moved 20 px from the top, font weight 700,
• rounding corners: 20 px.

My code

.test {
    width: 400px;
    height: 100px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    box-shadow: inset 5 5 5px rgba(0, 0, 0, 0.3)}

Thank you

Answer 1

.test {
    width: 400px;
    height: 100px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    padding-top: 20px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3)}

Added padding-top for your requirement of text being moved 20 px from the top. This has everything else you need I believe.

Answer 2

Try: box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);