CSS

CSS Shadows: A Deep Dive Part 1 – text-shadow

Posted onAuthorRotem Horovitz
CSS Shadows Part 1: text-shadow
Reading Time: 3 minutes

CSS allows us to cast shadows. It is sometimes (semi-wrongly) referred to as drop shadow, however, there are three distinct shadows in CSS, with different usages and different outcomes. Don’t worry about syntax and what each value means. We’ll go into that for each of these options.

DIV {
    text-shadow: 1px 1px 1px #000;
    box-shadow: 1px 1px 1px 1px #000;
    filter: drop-shadow(1px 1px 1px #000);
}

All three look rather similar in syntax, but their purpose is different. Let’s dive in, shall we?

First things first – let’s start with the basics.

Contents

  1. text-shadow basics You are Here!
  2. box-shadow basics
  3. filter:drop-shadow (coming soon)
  4. Diving even deeper (coming soon)

text-shadow



The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color. (MDN)

The first two values set the horizontal and vertical offset, or in layman terms – the shadow’s distance from the element.

Horizontal and vertical offset values can be in almost any unit (with the exception of %), positive or negative. Positive values will cast shadow to the right of the text horizontally, and below the text vertically.

The third value, blur radius is an optional value which can be specified but is not required. It’s the number of pixels the text is stretched which causes a blur effect. If you don’t use the third value – the default blur radius is zero.

The fourth value sets the shadow’s color. You can use any acceptable color value here: color names, HEX, RGBa, HSLa, etc.

Remember you can set as many shadows as you want using comma-separated lists of values.



Well, it allows you to add more than one shadow to create different effects – we will look into that later, but for now – here is a simple demo with 3 shadows:

See the Pen Multiple text shadows by Lurx (@lurx) on CodePen.

Browser support

Browser support for text-shadow is not a problem, however there are a few known issues currently. For more information, check Can I Use…

In the next posts in this series we will look at box-shadow and filter: drop-shadow(), and the pretty awesome things you can do with all three. Stay tuned.

But for now…

Read more about text-shadow:
This post was originally published as a CodePen post on May 17, 2018