Theory
Theory
Comments

Custom shadows

Sometimes you need to implement shadows that differ from the standard box-shadow without using images.

For example, shadows that are skewed in various directions.

It is impossible to do this using box-shadow. Therefore, you need to use a more complex technique:

Let’s create two blocks with regular shadows using the before and after pseudoelements.
Let’s skew these blocks using rotate
Let’s assign them a negative z-index.

This will move the boxes with shadows under the parent container so that only parts of the shadows will face outwards.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Custom shadows</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="shadow-box"> <h3>Block with shadows</h3> </div> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; font-family: "Arial Narrow", "Arial", sans-serif; } .shadow-box { position: relative; width: 400px; height: 100px; margin: 50px auto; padding: 100px 0; text-align: center; background-color: white; box-shadow: 0 0 3px #cccccc; } .shadow-box::before, .shadow-box::after { content: ""; position: absolute; top: 80%; bottom: 15px; width: 45%; max-width: 300px; background-color: #dddddd; box-shadow: 0 15px 10px #555555; } .shadow-box::before { left: 10px; } .shadow-box::after { right: 10px; }

Goalscompleted

Rotate the before pseudoelement of the shadow-box block 3° counterclockwise.
Then rotate the after pseudoelement clockwise 3°.
Assign both pseudo-elements a z-index that is equal to -1.

Custom shadows

Comments

Log in

Sign up

Restore access