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]  — inset shadow
5px     <— x-offset
10px     — y-offset
[2px]    — blur radius
[3px]    — spread radius
[red];   — color

The keyword inset, spread radius, blur radius, and color are optional. The order of the numerical values is important. The first numeric value means horizontal offset.

A positive horizontal offset shifts the shadow to the right, and a negative value shifts it to the left.

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

.btn { box-shadow: 0 0 0 0 #34495e; } 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; color: white; text-align: center; text-transform: uppercase; font: inherit; }

Goalscompleted

Shift the original shadow (which was initially invisible) 5px to the left of the button (use a negative horizontal offset),
and then move it 5px to the right of the button.

Horizontal Shadow Offset

Comments

Log in

Sign up

Restore access