CSS text shadow generator
Text shadow generator generates one or more shadows for the text. This tool allows two layers of the shadow for the text.
A text shadow consists of four values horizontal offset, vertical offset, blur radius and text shadow color. These values are separated by space.
Layer 1:
Layer 2:
This is text
div {
text-shadow: ;
}
Text shadow layer 1
1. Horizontal offset:
2. Vertical offset:
3. Blur radius:
4. Color:
Text shadow layer 2
1. Horizontal offset:
2. Vertical offset:
3. Blur radius:
4. Color:
How text shadow generator works?
The use of text shadow generator is very simple. You just need to change the values. As a result the generator generates corresponding values that can be used for any element.
Now we'll the see what is meant by the values given in the text shadow generator.
Suppose We have original text and we'll change the values to produce text shadow.
1. Horizontal offset
Horizontal offset (first value) shifts the text shadow from its original position to left or right depending upon the value.
Positive value shifts the shadow to the right of original position.
Negative value shifts the shadow to the left of original position.
2. Vertical offset
Vertical offset (second value) shifts the shadow above or below the original text.
Positive value shifts the text shadow below the original position.
Negative value shifts the text shadow above the original position.
3. Blur radius
Blur radius (third value) creates blur effect of the text shadow. The value of blur radius is always positive.
The value of blur radius varies from 0px to 100px. It can not be negative.
4. Box shadow color
Fourth value specifies the color of the text shadow. Here we are using hexadecimal value of color i.e. #rrggbb.
You can define any color of the box shadow in the shadow generator.
Multiple text shadows
There might be more than one text shadow layers. More than one layers of box shadow may give us an attractive box shadow.
Was this article helpful?