Please take a look at the attached picture. There is a shadow like this at the bottom of every page of a design that I am looking at. Could someone kindly tell me how create this effect? Thanks in advance.

Member Avatar


It's a background image? Look at the page in Inspect Element mode (Chrome or FF) and see the underlying CSS. You'll probably see a background image there somewhere.

I would position my container relative, then add another class within it called "shadow" and do the following

.shadow {
background: url() no-repeat; /* your image sliced from where the white background ends */
bottom: -10px; /* the size of the image */
width: 200px /*size of the image */
height: 20px /* the height of the image */

thanks. positioning worked.