Box shadow on HTML elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general.
+
Let's take a look at a default configuration of box-shadow:
In the example above the first property number is the origin of the x-axis, the second number is the origin of the y-axis and the third is the amount of blur.
+
We should also add some minimal styling to cleanup the .box-container a little bit for our example:
Now we make our inner child element absolute and set it's height and width dynamically to be slightly smaller than it's parent (percentages work best for this).
+
Remember to set this child element behind it's parent by adding z-index: -1.
+
.box-container {
+ /* No box-shadow needed on this element anymore */
+ /* Styles to make it less ugly */
+ background: white;
+ border-radius: 10px;
+ border: 1px solid #eee;
+ height: 200px;
+ padding: 10px;
+ position: relative;
+ width: 250px;
+}
+
+
Inner Containers
+
We also need to target the box-container-inner element set inside the current parent to reflect our custom shadow styling:
+
.box-container-inner {
+ bottom: 0;
+ /* The box-shadow is added here now */
+ box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+ height: 94%;
+ left: 3%;
+ position: absolute;
+ width: 94%;
+ z-index: -1;
+}
+
+
Which will make the drop-shadow render with a little more realistic depth:
+
+
But wait - there's more!
+
We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - filter:blur();.