Text Shadow Generator

Text shadow generator is a tool used to add shadow to text. It produces CSS code that can be applied to html elements as a result of the process. Text shadow generator makes your posts more effective. You can create colored shadows using this tool.

text shadow generator

What is CSS text-shadow

The CSS text-shadow property adds shadows to text. This property is a specified as a comma-seperated list of shadows. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

Sample;

.shadow {
    text-shadow: 1px 3px 3px blue;
}

Usage of text-shadow

text-shadow: horizontal-offset vertical-offset blur-radius color;

Property Values

The following table describes the CSS text-shadow property values.

Value Description
horizontal-offset * The horizontal distance of the shadow.
vertical-offset * The vertical distance of the shadow.
blur-radius The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Default value is 0.
color Specifies the color of the shadow.

* Required fields.

Examples

CSS Code Preview
.example1 {
  text-shadow: 1px 1px 1px black;
  color:white;
  background-color: #d8d8d8;
}
Example 1
.example2 {
  background: #0e8dbc;
  color: white;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
Example 2
.example3 {
  background-color: #f2f2f2;   
  color: #202c2d;
  text-shadow:
    0 1px #808d93,
    -1px 0 #cdd2d5,
    -1px 2px #808d93,
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5,
    -4px 5px #808d93,
    -5px 4px #cdd2d5,
    -5px 6px #808d93,
    -6px 5px #cdd2d5,
    -6px 7px #808d93,
    -7px 6px #cdd2d5,
    -7px 8px #808d93,
    -8px 7px #cdd2d5;
}
Example 3
.example4 {
  background-color: #edde9c;
  color: #bc2e1e;
  text-shadow:
    0 1px 0px #378ab4,
    1px 0 0px #5dabcd,
    1px 2px 1px #378ab4,
    2px 1px 1px #5dabcd,
    2px 3px 2px #378ab4,
    3px 2px 2px #5dabcd,
    3px 4px 2px #378ab4,
    4px 3px 3px #5dabcd,
    4px 5px 3px #378ab4,
    5px 4px 2px #5dabcd,
    5px 6px 2px #378ab4,
    6px 5px 2px #5dabcd,
    6px 7px 1px #378ab4,
    7px 6px 1px #5dabcd,
    7px 8px 0px #378ab4,
    8px 7px 0px #5dabcd;
}
Example 4