Theory
Theory
Comments

Horizontal Shadow Offset

We’ve created a simple shadow. Now let’s figure out the syntax for the property. Here it is:

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

Keyword inset, stretch, feathering, and color are optional. The order of the numerical values is important. The first digital value means horizontal offset.

The horizontal offset can be positive or negative.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Horizontal 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: 0 0 0 0 #34495e; color: white; text-align: center; text-transform: uppercase; font: inherit; }

Goalscompleted

Shift the original shadow (which was initially invisible) left by 5px,
and then move it right by 5px.

Horizontal Shadow Offset

Comments

Log in

Sign up

Restore access