CSS Shadow

The text-shadow property allows us to add one or several shadows to the text, separated by commas. The horizontal and vertical shadow's positions require property values that you can express in pixels, centimeters, inches, points, etc. We also use values of blur radius and color to add some shadow effects.

With CSS properties, you can also apply shadow effects to an element's container. Like the text-shadow property, the box-shadow property adds one or several shadows and includes the required horizontal and vertical shadow positions. The basic syntax also specifies the blur radius and color.

Keep in mind that the order of values matters: offset-x offset-y blur-radius color. Otherwise, the browser won't apply the shadow.

The color value is optional when specifying shadow parameters with the box-shadow property. However, if you omit this value, the browser will use the text color (color property value) for your shadows.

To specify the color value, you can use multiple options:

• HEX colors
• RGB/RGBA colors
• HSL/HSLA colors
• Predefined color names

Shadow blur is a technique to disperse the shadow's borders and blend them with a background element. Designers use this tool for creating more natural soft shadows. The blur-radius value of the box-shadow property defines how far the blurring spreads, and the larger the blurring, the more prominent it gets.

The blur radius can be specified in different length units, like pixels, inches, centimeters, etc., and can't take a negative value.

Horizontal and vertical offset values of the box-shadow property specify the position of a shadow and can be both positive and negative.

• The horizontal offset — the x-axis value — can be positive, and the shadow will be on the right of the box. A negative offset value puts the shadow on the left of the box.
• The vertical offset — the y-axis value — can be positive, and the shadow will be below the box. A negative value sets the shadow above the box.

The correct property name is text-shadow. Like other CSS properties, it requires a semicolon at the end of the line. If you decide to add another shadow or a couple of shadows, put a comma each time after the color property, e.g.:

{

text-shadow: 1px 1px 2px red, 0 0 4px blue, 2px 2px 6px yellow;

}

The correct answer is the box-shadow property. In design, we often apply shadows to buttons and cards to add depth, increase the element's position in a visual hierarchy, and indicate its interactivity. Besides, shadows add a natural aesthetic to the design.

The first two values of the text-shadow property— the x-offset and y-offset — specify the shadow's distance from the text. The third value — the blur-radius — defines how far the blurring spreads. The bigger the blur, the wider, lighter, and more natural a shadow gets.