CSS Shadow Effects

Coffee
Shadows

Create shadow effects with CSS!

Hover above me!

CSS Shadow Effects

By using CSS, you can add shadows to text and elements.

In our tutorial, you will learn the following properties:

  • text-shadow
  • box-shadow

CSS Text Shadow

CSS text-shadow The attribute adds a shadow to the text.

The simplest usage is to specify only the horizontal shadow (2px) and vertical shadow (2px):

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px;
{}

Try It Yourself

Next, add color to the shadow:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px red;
{}

Try It Yourself

Then, add a blur effect to the shadow:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px 5px red;
{}

Try It Yourself

The following example shows white text with a black shadow:

Text Shadow Effect!

Example

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
{}

Try It Yourself

The following example shows the neon glow shadow of red:

Text Shadow Effect!

Example

h1 {
  text-shadow: 0 0 3px #FF0000;
{}

Try It Yourself

Multiple shadows

To add multiple shadows to the text, you can add a comma-separated list of shadows.

The following examples demonstrate the neon glow shadows of red and blue:

Text Shadow Effect!

Example

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
{}

Try It Yourself

The following example shows white text with black, blue, and dark blue shadows:

Text Shadow Effect!

Example

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
{}

Try It Yourself

You can also use the text-shadow property to create a solid border (without shadow) around the text:

Border around the text!

Example

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
{}

Try It Yourself