box-shadow glossy effects and more

Hello Guest, I will explain how you can achieve a glossy effect with CSS using background-color and box-shadow.

Below is a blue square with text in it, our background color is set as #245A75, or:

Code:

div{background-color:#245A75;}

<center><div style="width:100px;height:100px;background-color:#245A75;color:#fff;"><br /><br />Hello, I'm a square!</div></center>

To achieve a glossy effect we make use of box-shadow, and set it to inset so our shadow will be inside the box rather outside it. To achieve the effect in the square below, you should always use colors lighter than your background color so it will appear to have a shine.

Code:

div{
background-color:#245A75;
box-shadow:0px 12px 6px #447A95 inset;
}

<center><div style="width:100px;height:100px;background-color:#245A75;box-shadow:0px 12px 6px #447A95 inset;color:#fff;"><br /><br />Hello, I'm a glossy square!</div></center>

What's great about box-shadow is that you can chain together multiple shadows in one property by using a comma! So you can have a glossy effect on top, a shadowy effect on the bottom, and a shadow on the outside of the box.

Code:

div{
background-color:#245A75;
box-shadow:0px 12px 6px #447A95 inset, 0px -10px 6px #144A65 inset, 3px 5px 6px rgba(0,0,0, 0.5);
}

<center><div style="width:100px;height:100px;background-color:#245A75;box-shadow:0px 12px 6px #447A95 inset, 0px -10px 6px #144A65 inset, 3px 5px 6px rgba(0,0,0, 0.5);color:#fff;"><br />Hello, I'm a square with three shadows!</div></center>

For the last shadow on the box above we used rgba, it is the same as rgb, but with an alpha filter to add opacity to our colors. This helps maintaining our colors a lot easier, especially for drop shadows.

Inset shadows are especially useful for rounded elements, in the example below you can see how different the shadows look compared to a linear object. You can round the corners using the border-radius property, to make an element a complete circle you will have to use a value that is half, or equal to that of the elements height/width.

Code:

div{
border-radius:50px;
background-color:#245A75;
box-shadow:0px 12px 6px #447A95 inset, 0px -10px 6px #144A65 inset, 3px 5px 6px rgba(0,0,0, 0.5);
}

<center><div style="width:100px;height:100px;background-color:#245A75;box-shadow:0px 12px 6px #447A95 inset, 0px -10px 6px #144A65 inset, 3px 5px 6px rgba(0,0,0, 0.5);color:#fff;border-radius:50px;"><br /><br />I'm a circle now!</div></center>

If you have any questions, or want to share some ways you like to use box shadow feel free to leave them below. Thanks for reading!