![neat image shadows neat image shadows](https://www.wimp.com/wp-content/uploads/2018/07/55f05d833735375e22e5b6ede51530f4_shadow_1316_866.jpg)
Text-shadow can be used to create some nifty and cool text effects. There is a useful text-shadow generator tool over at CSS3Gen: CSS3 Text Shadow Generator Trivia & Notes A positive value moves the shadow to the bottom of the text along the specified distance, a negative value moves it to the top. The y-offset is the vertical offset of the shadow. A positive value moves a shadow to the right of the text along the specified distance, a negative length moves it to the left. The x-offset is the horizontal offset of the shadow. The x and y offsets, on the other hand, are obligatory. Negative values cause the shadow shape to contract. The way the blur radius works is that positive values cause the shadow shape to expand in all directions by the specified radius. Negative values are not allowed for the blur radius. Otherwise, the larger the value, the more the shadow’s edge is blurred. If the blur value is zero, the shadow’s edge is sharp.
![neat image shadows neat image shadows](https://i.pinimg.com/originals/88/a0/ce/88a0ce2da4f10ac736af7e9d7d1bf642.jpg)
The blur radius is optional, if you don’t specify it, the browser uses the default blur radius value which is zero. The 3 length values defining each shadow are: the x-offset (horizontal distance), y-offset (vertical distance), and “blur radius” of the shadow. Not only can you set the position, blur and color of the shadow, but you can also set its opacity using the alpha value (same for hsla colors). Using rgba colors has an advantage over using hexadecimal colors, for instance, because it adds yet another dimension to work with. The color can be set using the different formats available (including RGB and HSL colors). If no color is specified the shadow has the resulting color of the ink that it shadows. The shadows may thus overlay each other, but they never overlay the text itself.Įach shadow is specified by 2 to 3 length values (third value is optional) and an optional. The shadows are applied front-to-back: the first shadow is on top. It accepts a comma-separated list of shadow effects to be applied to the text of the element.Įach shadow is applied to the element’s text and all its text decorations (composited together).
![neat image shadows neat image shadows](https://i.pinimg.com/736x/47/ae/fc/47aefce1bd19fe056e4f5bb275f5ce7e--art-installations-art-sculptures.jpg)
The text-shadow property is used to add shadows to text.