HTML CSS Notes
CSS Box Shadow Views

Box Shadows can be applied to divs and other html elements that are the same as or similar to divs.

Box Shadows can be applied to divs with or without borders. I like borders so the rest of the examples on this page will have borders around it.

This is the shortest box-shadow code. It only has two numbers.

The first number is required and it is the h offset (horizontal offset) (left or right).

The second number is required and it is the v offset (vertical offset) (bottom or top).

If no color is specified, the default color of the box-shadow will be the same color as the text color inside of it. If there is no text inside of it the color of the box-shadow will be the same as the default color of text which is black.

You can use negative numbers in the box-shadow.

Positive numbers will put the shadow on the right and bottom sides.

Negative numbers will put the shadow on the left and top sides.

The third number is the blur radius. It is optional, which means it is not necessary for the code to work, however it is good to have. It can diffuse the shadow making it softer if you don't want a hard shadow.

The fourth number is the spread radius. It is also optional. You can use either a positive or negative number. A positive number will spread the shadow radius farther and a negative number will reduce the shadow radius.

The spread radius with a negative number.

In fifth place we have the color option. It would be in third place if you didn't use the blur or spread radius and in fourth place if you only omit the spread radius.

The color in fourth place without the spread radius.

By default the box-shadow is an outset shadow, which means the shadow is on the outside of the div.

However, if you add the word inset to the code after the color code, providing that you use a color, the shadow will become an inset shadow, which obviously means it will be on the inside of the div.

You can use positive or negative numbers for the h and v offsets.

As you can see in the example above, the inset shadow is opposite of the outset shadow in that the positive numbers will put the inset shadow at the left and top sides of the div and the negative numbers will put the shadow at the right and bottom of the div.

You can use multible box shadows on the same div.

The syntax for this is to simply use a comma to seperate each one appropriately. The semicolon always goes at the end in CSS code.

As far as I know you can use as many as you want. I don't know if there is a limit or what it might be if there is one.

You can experiment with all different kinds of code combinations.

Here we have 0 pixels of horizontal offset, 22 pixels of vertical offset, 70 pixels of blur radius, and 4 pixels of spread radius, with the color black using the rgba color code with an alpha channel of zero point 56.

For the color code in CSS you can use one of the 140 color name codes, or you can use the rgb, rgba, hexadecimal, hsl, hsla color codes scale, or maybe something else. I haven't looked it up thoroughly yet, so I don't know if they have added anything to it yet, or if they will.

An example of a different box-shadow code combination.

Another example of a different box-shadow code combination.

The code for the 3 examples above I found on the internet while I was looking this stuff up. I may have changed them a little bit just to make it easier for me. If you look this stuff up for yourself, you may find lots of other cool codes to use for your box-shadow codes too or you can just create your own.

Note; this short box-shadow tutorial may not cover all there is to know about box shadows. These are my personal CSS notes that I can refer to when I need to remember how they work. There are a few other minor things that I didn't mention here that are kind of irrelavent to me, because I already know them. However, explaining every little single detail about computer code can get to be a little tedious and boring, so I prefer to just keep it simple, straightforward, and easy to understand.