Categories
Web development

CSS Shadows

With CSS you can add shadow to text and to elements. CSS Shadows can make the text more readable, or add to image borders more contrast.

CSS shadows
*to see how to create the CSS long shadow effect above click here.

You can add shadow to text using the text-shadow property, or to the element using the box-shadow property.

CSS text-shadow property

The CSS text-shadow property applies the shadow effect to the text:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
  color: #2a9d8f;
}
</style>
</head>
<body>

<h1>Text-shadow</h1>

</body>
</html>

Output:

Text-shadow

Example2 – Add color to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px black;
  color: #2a9d8f;
}
</style>
</head>
<body>

<h1>Text-shadow</h1>

</body>
</html>

Output:

Text-shadow

Example3 – add a blur effect to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px black;
  color: #2a9d8f;
}
</style>
</head>
<body>

<h1>Text-shadow</h1>

</body>
</html>

Output:

Text-shadow

Example4 – You can also use the text-shadow property to create a plain border around some text (without shadows):

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: #2a9d8f;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Border around text!</h1>

</body>
</html>

Output:

Border around text!

CSS box-shadow property

The CSS box-shadow property applies the shadow effect to elements:

Example1: 

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 250px;
  height: 100px;
  padding: 15px;
  background-color: #e9c46a;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow.</div>

</body>
</html>

Output:

This is a div element with a box-shadow.


Example2 – Add color to the shadow:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 250px;
  height: 100px;
  padding: 15px;
  background-color: #e9c46a;
  box-shadow: 10px 10px #2a9d8f;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow.</div>

</body>
</html>

Output:

This is a div element with a box-shadow.


Example3 – add a blur effect to the shadow:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 250px;
  height: 100px;
  padding: 15px;
  background-color: #e9c46a;
  box-shadow: 10px 10px 10px #2a9d8f;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow.</div>

</body>
</html>

Output:

This is a div element with a box-shadow.


Example4 – an example of using the box-shadow property to create calendar cards:

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  width: 300px;
  background: #e76f51;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.header {
  background-color: #2a9d8f;
  color: white;
  padding: 10px;
  font-size: 40px;
}

.calendar-container{
  padding: 10px;
}
</style>
</head>
<body>

<div class="card">
  <div class="header">
    <h1>13</h1>
    <p>Friday</p>
  </div>

  <div class="calendar-container">
    <p>May 13, 2022</p>
  </div>
</div>

</body>
</html>

Output:

13

Friday

May 13, 2022


Example5 – add shadow to the image: 

<style>
.shadows {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.container {
  padding: 10px;
}
</style>
</head>

<body>

<div class="shadows">
  <img src="https://lenadesign.org/wp-content/uploads/2020/01/css-shadows.jpg" alt="CSS Shadows" style="width:100%">
  <div class="container">
    <p>CSS Shadows</p>
  </div>
</div>
</body>
</html>

Output:


CSS Shadows

CSS Shadows


Enjoy coding!

Read also:

CSS box-shadow Property

CSS Long Shadow Text Effect