Theory
Theory
Comments

Vertical Shadow Offset

Once again the syntax is:

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

The second numeric value sets the vertical offset. It works in the same way as the previous value, shifting the shadow up or down.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vertical Shadow Offset</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn" type="button">Button</button> </body> </html>

CSS

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

Goalscompleted

Offset the original shadow down by 10px,
and move it up again by 10px.

Vertical Shadow Offset

Comments

Log in

Sign up

Restore access