CSS Raised Edges & Lifted Corners Using Shadow Effects

If you’re looking to add a 3D effect to an element’s frame without the use of an image, it can be done with pure CSS.  Using a combination of CSS properties and pseudo-elements can create the illusion of a box with curled corners or lifted edges.

The edges or corners of a box element can be raised with the transform and box-shadow CSS properties used with the ::before and ::after pseudo-elements.

• • • transform – used with skew value to rotate and create angles.
  • • box-shadow – used to create shadow effect.
  • • ::before – used for placement of the shadow effect located on left.
  • • ::after – used for placement of the shadow effect located on right.

This tutorial will cover both raising the edges and corners of a box element for that lifting and curling effect.  Before getting started, the HTML needs to be setup first.

 

SET UP THE HTML

• 1. The standard boilerplate template was used for the HTML.  If you’re using Visual Studio Code, the shortcut is Shift + 1 from the index.html page.
• 2. Sections were then created to separate the two different shadow effects.  Div tags with a class of container were used within each section.
• 3. The box element divs with class names were then placed within the containers.  These divs can be personalized with some additional CSS and will also display your text content.
• 4. Nested within the box element divs, empty div tag with class names were added to use with the pseudo elements.

 

ADDITIONAL CSS USED

CSS positioning is required to create the raised edge and lifted corner shadow effect.  The box elements has to be set with a position: relative while the nested empty divs needs a position: absolute value.

The z-index property with a value of -1 was also used to hide the empty nested divs behind the box elements.  Doing this will only show the shadows from the empty divs to create the illusion of depth.

 

 

 

CSS RAISED EDGES USING SHADOW EFFECTS

Two separate files need to be created.  Copy the HTML code below and paste it into an index.html file and copy and paste the CSS code below into a style.css file.  Here is what the code should output.

HTML CODE

 

CSS CODE

 

 

 

CSS RAISED CORNERS USING SHADOW EFFECT

Copy the HTML code below and paste it into an index.html file and copy and paste the CSS code below into a style.css file.  Here is what the code should output.

HTML CODE

 

 

CSS CODE

 

 

 

SUMMARY

It’s easy to see how everything works simply by removing the z-index from the CSS.  The position of the shadows can also be moved around by changing the values of the left right bottom values so feel free to play around with the code.