How to Add Drop and Text Shadows in Dreamweaver - dummies

How to Add Drop and Text Shadows in Dreamweaver

By Janine Warner

You can enhance your designs in Dreamweaver and give your pages greater depth by adding drop shadows to images, <div> tags, and other elements. Adding text shadows makes your words easier to read, especially if your design has a complex background or the foreground and background colors lack contrast.

[Credit: Photo by]
Credit: Photo by

Dreamweaver CC provides better support and integration of CSS3 drop shadows and text shadows from the new CSS Designer panel.

You can create class or ID styles with text shadows, and you can add text shadows to existing HTML elements by defining a tag style, such as the heading 1 style seen here. The CSS3 code that creates that text shadow is

h1 {text-shadow: 2px 2px 2px #000;}

The numbers in the code specify that the text shadow should extend 2 pixels to the right and 2 pixels below the text with a 2-pixel blur. In addition, the shadow is created with the color black, specified by the abbreviated hexadecimal color code #000.

When creating rules for text shadows you can specify up to four values:

  • horizontal and vertical: The first two number values are required and specify the horizontal and vertical offsets — the distance the drop shadow extends below the text (vertical) and to the right of the text (horizontal).

  • blur radius: The third value specifies the amount of blur in the shadow. If you don’t include blur radius, the default is 0, which makes the shadow appear as a solid color.

  • color: The fourth value specifies the color of the shadow and can be defined using a hexadecimal color code or an RGBa color code.

Choosing an RGBa color for the Color option gives you greater control over the shadow’s appearance because you can add transparency.

You can add a text shadow using the Properties panel at the bottom of the CSS Designer panel. To do so, follow these steps:

  1. Scroll down to the Text-Shadow section of the CSS Designer Properties panel.

  2. Enter the size of the shadow you want to display using the H-shadow (horizontal) and V-shadow (vertical) fields.

  3. Add the amount of blur you want for your text shadow by entering a size in the Blur field.

  4. Click the color well and select the color your want to use in the text shadow.