Tag: #CSSShadows

CSS text-shadow Property

Post author By Lena Stanley
Post date February 17, 2022

The CSS text-shadow property adds a shadow to text.

Demo:

Syntax:

text-shadow: x-shadow y-shadow blur-radius color|none;

x-shadow – the position of the horizontal shadow.

y-shadow – the position of the vertical shadow.

blur-radius (optional) – the blur radius.

color (optional) – the color of the shadow.

none (default) – no shadow.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-shadow: 2px 2px red;
  font-size:25px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example2:

You can add more than one shadow to the text. Add a comma-separated list of shadows:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: #94d2bd;
  text-shadow: 2px 2px #005f73, 0px 0px 15px #0a9396;
  font-size: 25px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example3:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: #0a9396;
  text-shadow: 1px 1px #e9d8a6, 2px 2px #e9d8a6, 3px 3px #e9d8a6, 4px 4px #e9d8a6, 5px 5px #e9d8a6, 6px 6px #e9d8a6, 7px 7px #e9d8a6, 8px 8px #e9d8a6, 9px 9px #e9d8a6, 10px 10px #e9d8a6, 11px 11px #e9d8a6, 12px 12px #e9d8a6, 13px 13px #e9d8a6, 14px 14px #e9d8a6, 15px 15px #e9d8a6;
  font-size: 25px;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

CSS Long Shadow Text Effect

Post author By Lena Stanley
Post date April 6, 2021

Demo:

*to see the CSS Long Shadow Text Effect on the website click here.

To create the CSS Long Shadow Text Effect follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="text">LONG SHADOW</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background end the elements:

body {
  height:100vh;
  align-items: center;
  justify-content: center;
  display: flex;
}

.container {
  position: relative;
  width:400px;
  height:100px;
  overflow: hidden;
  background-color: #00b4d8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px rgba(0,0,0,0.3);
}

Style the text. To create the long shadow effect we will use the CSS text-shadow property.

.text {
  font-family: arial black;
  color: white;
  font-size:40px;
  text-shadow: 0px 0px #0096c7,1px 1px #0096c7,2px 2px #0096c7,3px 3px #0096c7, 4px 4px #0096c7,5px 5px #0096c7,6px 6px #0096c7,7px 7px #0096c7,8px 8px #0096c7,9px 9px #0096c7,10px 10px #0096c7,11px 11px #0096c7,12px 12px #0096c7,13px 13px #0096c7,14px 14px #0096c7,15px 15px #0096c7,16px 16px #0096c7, 17px 17px #0096c7,18px 18px #0096c7,19px 19px #0096c7,20px 20px #0096c7,21px 21px #0096c7,22px 22px #0096c7,23px 23px #0096c7,24px 24px #0096c7,25px 25px #0096c7,26px 26px #0096c7,27px 27px #0096c7,28px 28px #0096c7, 29px 29px #0096c7,30px 30px #0096c7,31px 31px #0096c7,32px 32px #0096c7,33px 33px #0096c7,34px 34px #0096c7,35px 35px #0096c7,36px 36px #0096c7,37px 37px #0096c7,38px 38px #0096c7,39px 39px #0096c7,40px 40px #0096c7, 41px 41px #0096c7,42px 42px #0096c7,43px 43px #0096c7, 44px 44px #0096c7,45px 45px #0096c7,46px 46px #0096c7,47px 47px #0096c7,48px 48px #0096c7,49px 49px #0096c7,50px 50px #0096c7, 51px 51px #0096c7,52px 52px #0096c7,53px 53px #0096c7,54px 54px #0096c7,55px 55px #0096c7, 56px 56px #0096c7;
}

Watch also the video tutorial:

Enjoy coding!

CSS Shadows

Post author By Lena Stanley
Post date January 30, 2020

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.

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:

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

Enjoy coding!