Home and Learn: Web Design

CSS Text Shadows, CSS Box Shadow

You can add shadows to html elements like paragraphs of text. Text shadow and box shadow both use similar values, which is why we've grouped these two together.

Here's the same paragraph of text. The first has no text shadow while the second has a shadow applied.

Lorem ipsum dolor sit amet

And here's some text in a HTML blockquote tag. Again, the first has no shadow applied and the second has a box shadow applied.

"I am Dracula; and I bid you welcome, Mr. Harker, to my house. Come in; the night air is chill, and you must need to eat and rest." As he was speaking, he put the lamp on a bracket on the wall, and stepping out, took my luggage; he had carried it in before I could forestall him. I protested but he insisted.

The box shadow on the blockquote makes it really pop out visually.

You can also add a shadow to images to make them stand out:

Let's see how it's done.

CSS Shadow

The css attribute you need for a text shadow is this:

text-shadow:

And the attribute for the box shadow is this:

box-shadow:

Easy enough to remember! The values that go with the attribute can be a bit tricky. You need at least two, an x-offset and a y-offset. The x-offset is how far from the left of your element you want your shadow; the y-offset is how far down you want it. Try this out:

Add a style in the head section of your HTML code:

	.shadowOne {

		text-shadow: 4px 6px;
		font-weight: bold;

	}

(We've added a font-weight attribute just to make the text stand out. Notice that the two values sare separated by a space rather than a comma.)

Now apply the style to a paragraph of text:

Lorem ipsum dolor sit amet

You should see this when you save your work and load the HTML page into your browser:

Lorem ipsum dolor sit amet

Not too shadowy! It looks like we have a duplicate of the text hovering just below the first one. It's hovering because we used a value of 5px for the x-offset and a value of 12 for the y-offest.

Exercise
Try changing the values for the x and y offsets to see what happens.

CSS Shadow Blur

You can add a blur value after your offsets. Try this:

	.shadowTwo {

		text-shadow: 4px 6px 10px;
		font-weight: bold;

	}

Now add a paragraph of text and apply the style:

Lorem ipsum dolor sit amet

Save and reload and you'll find the shadow is much more, well, shadowy:

Lorem ipsum dolor sit amet

But the blur is just done by adding another value after the offsets, 10px in this case.

Shadow Color

If you don't specify a color for your shadow, the default is black. You can, however, have any color you want for your shadow. Just add a color value on the end:

	.shadowThree {

		text-shadow: 4px 6px 10px #838181;
		font-weight: bold;

	}

Lorem ipsum dolor sit amet

The color value can be a hexaecimal value, as above. You can also use a color name or an RGB value:

	.shadowThree {

		text-shadow: 4px 6px 10px red;
		font-weight: bold;

	}

	.shadowThree {

		text-shadow: 4px 6px 10px rgb(255, 0, 0);
		font-weight: bold;

	}

spread-radius for box shadow

For the box shadow, you can also add a soread radius value. The spread raidus will make your shadows grow, if you use a positive value. If you use a negative value, the shadow will shrink. Below, the spread radius is being set to a value of 10px.

	.shadowBoxTwo {
		box-shadow: 10px 5px 10px 12px #838181;
	}

"I am Dracula; and I bid you welcome, Mr. Harker, to my house.
Come in; the night air is chill, and you must need to eat and rest."
As he was speaking, he put the lamp on a bracket on the wall, and stepping
out, took my luggage; he had carried it in before I could forestall
him. I protested but he insisted.

</blockquote>

And here's the result:

"I am Dracula; and I bid you welcome, Mr. Harker, to my house. Come in; the night air is chill, and you must need to eat and rest." As he was speaking, he put the lamp on a bracket on the wall, and stepping out, took my luggage; he had carried it in before I could forestall him. I protested but he insisted.

Some text.

Shadow Inset

You can have the shadow on the inside of the element, if you use the inset keyword. Like this:

"I am Dracula; and I bid you welcome, Mr. Harker, to my house. Come in; the night air is chill, and you must need to eat and rest." As he was speaking, he put the lamp on a bracket on the wall, and stepping out, took my luggage; he had carried it in before I could forestall him. I protested but he insisted.

The above was done with the following style:

	.shadowFour {

		box-shadow: inset 10px 5px 10px 5px #838181;

	}

Play around with shadows, see what you can come up with.

<< CSS Grids | HTML Tables >>