Table of Contents
Content overlays are a big part of how websites are made today. They let you How to CSS-Only Overlays Effect with Box-Shadow, show it again with more information or controls behind it, like buttons.
A typical overlay is half-transparent and has a solid background color, which is usually black. It also has text or buttons that users can see or use. After the interaction (clicking or hovering), the overlay goes away and the content underneath is shown.
In this article, we’ll look at how to use pure CSS to add a colored overlay to an image. On the demo below, you can see how everything turned out. Move your mouse over the pictures to see the Pokemon on the overlays. Even though this post is about images, the technique it shows can be safely used with other types of content, like text blocks.
How to CSS-Only Overlays Effect with Box-Shadow
Creating layered shadows with CSS box-shadow
You can stack multiple shadows on top of each other by separating their values with commas. This technique can be used to create interesting shadows that blend smoothly into the page. Notice the spread value isn’t added — it’s not really needed in this case, but ultimately, it’s up to you to decide how your box-shadow looks.
If we set the offset and blur radius to 0px and add a spread value to one shadow, we will add a border to the box. Since this border is technically a shadow because no extra space is taken up by the box in the parent element.
Creating neon shadows with CSS box-shadow
Real-life shadows are usually black or gray, with varying amounts of opacity. But what if shadows had colors?
In the real world, you get colored shadows by changing the color of the light source. There’s no “real” light source equivalent to change on a website, so you get this neon effect by changing the color value on the box-shadow.
Creating neumorphic shadows with CSS box-shadow
This effect is unique and visually pleasing. It came from skeuomorphism, which tried to replicate objects exactly as they would appear in real life. There are some examples in the linked article on skeuomorphism
The first two effects we need to create deal with flat web components that seem to float above the page and cast shadows on the background. This effect makes these components look like they extrude from the page.
FAQ
How do you overlay a box in CSS?
- Specify the width and height of the “container” class. Set the position to “relative” and add the margin property.
- Set both the width and height of the “box” class to “100%”. Specify the position with the “absolute” value. …
- Style the “overlay” class by using the z-index, margin and background properties.
How do I get a box shadow only on the bottom CSS?
To display the shadow at the bottom of the image, the “box-shadow” property is used. For this purpose, offset-x is set as “0”, offset-y is any positive value, and the color you want to display is also set.
Does CSS support box shadow?
The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.