CSS Text Shadow Generator

It is an automatic text-shadow generation tool that can add various shadows to characters.
You can choose from a wealth of samples and customize them.
You can try various designs by supporting real-time text changes and multiple shadows.

Sample list. Select the one that most closely matches the image of what you want to make. It is possible to edit after selecting.

Please note that when you select the example in the sample list, any data being edited will be overwritten.
.original-text-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #000000;
  font-size: 50px;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  font-weight: bold;

Style editor


Other specifications

How to use the tool

・I don't know how to use the tool.
・I want to know various ways to use it
・I want to know the details of each item
For those who like, we have prepared a video that introduces the contents and features and explains how to use it.

Please take advantage of it.

Lots more videos on Youtube!

List of generators

List of other Tools

Description of each CSS property

The text-shadow property allows you to set a shadow on a character (text).
Each value (value) can be specified as follows.
text-shadow: horizontal displacementvertical displacementshadow blur amountshadow color
Example description) text-shadow: 2px 2px 3px rgba(0, 0, 0, .5)
Negative values forhorizontal displacementvertical displacementwill place it vertically above and horizontally to the left, respectively.
The initial values forhorizontal displacementvertical displacementshadow blur amountamount are 0 for each.
Ifshadow coloris not specified, the color selected by the user agent will be used. Therefore, it must be explicitly defined for cross-browser compatibility.
Multiple shadows can be specified.
To specify multiple shadows, separate them with a comma ",". The first shadow specified will be in the foreground.
Example description) text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;
The position property sets how the element is positioned.
The top, right, bottom, and left properties determine the position of the placed element if a value other than static (the default value) is specified.
For non-static values, the z-index (order of overlap) can be specified. z-index defaults to auto. A numerical value can be specified, and the higher the value, the higher the element will be displayed as the upper layer (the layer in front).
The position property can be set to the following values
  • relative:The position of the element itself does not change even if it is specified, but unlike static (default value), it is affected if top, etc., is specified.
  • absolute:If an ancestor element is specified other than static, it is placed with respect to the nearest specified ancestor element.
  • fixed:The elements are positioned relative to the screen.
    The position does not change when scrolling.
  • sticky:Like fixed, it fixes the position when scrolled, but it cannot leave the scope of the parent element.
Example description) position: relative;
When specifying colors on the Web, "HEX," "RGB," and "HSL" are often used.
First of all, HEX, which you see most often (hexadecimal number), is a way of expressing colors in hexadecimal. It is expressed in the form of #1234ab.
The six digits after # are the values of red (1st~2nd digits), green (3rd~4th digits), and blue (5th~6th digits). Various colors are represented according to the color intensity of each value.
If each of the two digits is the same value, a three-digit expression can be used. For example, #aa9933 can be represented as #a93.
If you want to specify the transparency in hexadecimal, you can use an 8-digit number, with the 7th to 8th digits also in hexadecimal. 80% transparency can be specified with #aa9933CC, for example.
RGB, like HEX, is capable of representing colors in red, green, and blue.
Each value can be specified in the range 0 ~ 255 and is represented as rgb(red value, green value, blue value).
Example description) rgb(10, 50, 220)
If you want to specify transparency, you can use rgba(red value, green value, blue value, transparency(alpha)).
The alpha value can be specified in the range 0~1, for example rgba(0, 0, 255, .5).
HSL stands for Hue, Saturation, and Lightness.
When specifying colors in HSL, colors are specified using these three elements. Once the hue (type and shade of color) is determined, colors can be determined by adjusting saturation and lightness, which is more intuitive than RGB.
The following can be specified: hsl(hue, saturation, lightness)
  • Hue:Basically, you can specify a number between 0 and 360. If you specify a number beyond this range, it will be considered as a circumference, so for example, if you specify 380, it will be the same as 20.
  • Lightness:You can specify a value between 0 and 100%; the closer to 100%, the brighter the image. Conversely, the closer the value is to 0%, the darker it becomes.
If you want to specify transparency, there is hsla. Like rgba, the final a represents the alpha (transparency).
alpha values can be specified from 0 to 1, for example, hsla(80, 80%, 50%, .5).