CSS Text Shadow Generator

Text Shadow CSS Property

The CSS text shadow property is used to add a shadow to the text. Multiple property parameters can be specified, separated by a comma.

Each shadow applies to the text of the element, as well as to all styles (for example, underlining) of the text.

Shadows are applied in the following order: the first shadow is located at the very top. Therefore, shadows can overlap each other, but they are never placed on top of the text.

Each shadow is usually given two or three length values (third is optional), and optionally a color. If you don't specify a color, the shadow will automatically inherit the text color. The color can be set using various formats (including RGB and HSL). We recommend specifying the color in rgba format, since it has some advantages over the hexadecimal colors. For example, this format allows you to use another value. This way, you can adjust not only the location, blur and color of the shadow, but also the opacity level (the same applies to the hsla format).

Syntax

The property takes on a composite value of four different parts: horizontal offset, vertical offset, blur and shadow color.

text-shadow: offset-x offset-y blur color;

Horizontal Offset (X-axis)

The first value offset-x, shifts the shadow along the X axis. A positive value will shift the shadow to the right, and a negative value - to the left.

.shadow1 {
   text-shadow: 5px 0px 2px rgba(128, 0, 0, 1);
}
.shadow2 {
   text-shadow: -5px 0px 2px rgba(128, 0, 0, 1);
}

Vertical Offset (Y-axis)

The second value offset-y, shifts the shadow along the Y axis. A positive value will shift the shadow down, and a negative value - up.

.shadow3 {
   text-shadow: 0px 5px 2px rgba(128, 0, 0, 1);
}
.shadow4 {
   text-shadow: 0px -5px 2px rgba(128, 0, 0, 1);
}

Blur

The third value - blur, is the radius of the shadow blur, see how it works on the text shadow generator above. A value of 0 means that the shadow will not be blurry at all, the edges and sides will be absolutely clear. The higher the value, the more blurry the shadow will become. Negative values are not allowed.

.shadow5 {
   text-shadow: 0px 0px 5px rgba(128, 0, 0, 1);
}
.shadow6 {
   text-shadow: 3px 3px 5px rgba(128, 0, 0, 1);
}

Color

The shadow color can be absolutely any color and can be written in different formats available in CSS (HEX, RGB, RGBA, etc.), we use RGBA, so that you can set the opacity level of the shadow.

.shadow7 {
   text-shadow: 0px 0px 5px #638253;
}
.shadow8 {
   text-shadow: 3px 3px 5px rgba(0, 128, 0, 1);
}

Multiple Shadows

With the CSS text-shadow property, you can add multiple shadows to the text. To add multiple shadows, just write them in a single property, separated by commas. Or, just use the generator above ... it's so much easier!

.shadow9 {
  background: rgba(35, 35, 35, 1);
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 
               0px 0px 10px rgba(255, 255, 255, 1), 
			   0px 0px 15px rgba(255, 255, 255, 1),
			   0px 0px 20px rgba(73, 255, 24, 1),
			   0px 0px 30px rgba(73, 255, 24, 1),
			   0px 0px 40px rgba(73, 255, 24, 1),
			   0px 0px 55px rgba(73, 255, 24, 1),
			   0px 0px 75px rgba(73, 255, 24, 1);

}
.shadow10 {
  text-shadow: 6px 6px #989898, 12px 12px #6c6666;
}

.shadow11 {
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 1),
               5px 4px 0px rgba(0, 0, 0, 0.15);
}
.shadow12 {
  color: rgba(255, 255, 255, 1);
  text-shadow: 2px 2px 0px rgba(64, 116, 181, 1), 
               2px -2px 0px rgba(64, 116, 181, 1), 
			   -2px 2px 0px rgba(64, 116, 181, 1), 
			   -2px -2px 0px rgba(64, 116, 181, 1), 
			   2px 0px 0px rgba(64, 116, 181, 1), 
			   0px 2px 0px rgba(64, 116, 181, 1), 
			   -2px 0px 0px rgba(64, 116, 181, 1), 
			   0px -2px 0px rgba(64, 116, 181, 1);
}

.shadow13 {
  color: rgba(167, 221, 60, 1);
  text-shadow: 2px 0px 0px rgba(128, 0, 64, 1), 
               3px 2px 0px rgba(77, 0, 38, 0.5), 
			   3px 0px 3px rgba(255, 0, 43, 1), 
			   5px 0px 3px rgba(128, 0, 21, 1), 
			   6px 2px 3px rgba(77, 0, 13, 0.5), 
			   6px 0px 9px rgba(255, 85, 0, 1), 
			   8px 0px 9px rgba(128, 42, 0, 1), 
			   9px 2px 9px rgba(77, 25, 0, 0.5), 
			   9px 0px 18px rgba(255, 213, 0, 1), 
			   11px 0px 18px rgba(128, 106, 0, 1), 
			   12px 2px 18px rgba(77, 66, 0, 0.5), 
			   12px 0px 30px rgba(212, 255, 0, 1), 
			   14px 0px 30px rgba(106, 128, 0, 1), 
			   15px 2px 30px rgba(64, 77, 0, 0.5), 
			   15px 0px 45px rgba(128, 255, 0, 1), 
			   17px 0px 45px rgba(64, 128, 0, 1), 
			   17px 2px 45px rgba(38, 77, 0, 0.5);
}
.shadow14 {
  color: rgb(255, 255, 255);
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.2), 
               1px 1px 1px rgba(0, 0, 0, 0.6);
}

CSS References Used

CSS Property

text-shadow

CSS Data Type

<color>

CSS Data Type

<length>

CSS Function

rgba