BACK
BACK
BACK
Loading...

Blog / HowTos /  How to Create Shadow Effect in CSS

January 19, 2016 - Cathy

How to Create Shadow Effect in CSS

Shadow Effect in CSS

CSS3 lets you add shadow to both text and to elements. Using the shadow effect in CSS can give text and elements the appearance of being raised up off the page, and casting a shadow. The properties you use for creating the shadow effect are:

  • text-shadow property: This property provides a CSS text shadow effect.
  • box‐shadow property: The CSS box-shadow property applies shadow effects to elements.

You aren’t limited to creating just one shadow effect. CSS3 allows you to apply a variety of different shadow effects by changing the values of the properties. You can change the color of the shadow and include more than one shadow to get different effects.

Mobilunity

How to Create a Text Shadow Effect in CSS

You can apply a variety of different shadow effects to text using the CSS3 text‐shadow property. The values of the text-shadow property are:

  • h-shadow: Required value that determines the position of the horizontal shadow. Negative values are allowed
  • v-shadow: Required value that determines the position of the vertical shadow. Negative values are allowed
  • blur-radius: Optional value that sets the blur radius. Default value is 0
  • color: Optional value that determines the color of the shadow.
  • None: Default value. No shadow
  • Initial: Sets this property to its default value.
  • Inherit: Inherits this property from its parent element.

shadow effect in css

Here are some examples of how to apply different shadow effects to text:

  •  Example 1: At the most basic use, just specify the horizontal shadow (2px) and the vertical shadow (2px):
 h1 {
text‐shadow: 2px 2px;
}
  • Example 2: To spice things up add a color to the shadow effect
h1 {
text-shadow: 2px 2px blue;
}
  • Example 3: If you want you may also add a blur to the shadow effect
h1 {
text-shadow: 2px 2px 5px blue;
}
  • Example 4: To show white text with a black shadow use the following:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
  • Example 5: If you want to add more than one shadow to the text, use a comma-separated list of shadows. The following will display white text with black, blue, and dark blue shadow:
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Now that you know the basics for creating text shadow effects, it is time to learn about creating an element shadow effect in CSS

Mobilunity

Creating an Element Shadow Effect in CSS

Creating shadow effects for elements is similar to using shadow effect for text. The values for the box-shadow property are:

  • None: Default value and no shadow is displayed
  • h-shadow: Required value that sets the position of the horizontal shadow. Negative values are allowed. Positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • v-shadow: Required value that determines the position of the vertical shadow. Negative values are allowed and mean the box shadow will be above the box, a positive one means the shadow will be below the box.
  • blur: Optional value that determines the blur distance
  • spread: Optional value that determines the size of the shadow. Negative values are allowed
  • color: Optional value that determines the color of the shadow. The default value is black.
  • Inset: Optional value that changes the shadow from an outer shadow (outset) to an inner shadow
  • Initial: Sets this property to its default value.
  • Inherit: Inherits this property from its parent element.

Here are a few examples of how to create element shadow effects in CSS:

  • Example 1: The most basic use only specifies the horizontal shadow and the vertical shadow. The following is a <div> element with a black box-shadow:
div {
box-shadow: 10px 10px;
}
  • Example 2: This specifies a<div> element with a grey box-shadow:
div {
box-shadow: 10px 10px grey;
}
  • Example 3: Now for a big finish, here is an example of using the box-shadow property to create paper-like cards:
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

You can use the shadow effect in CSS for giving a special element a highlighted effect, or you may want to use it for all of your text to enhance the appearance of your content. Another way the shadow effect can be useful is to highlight links within your text in order to make them stand out.

If you experience any CSS issues, this might help you.

If you need extra help with your shadow effect in CSS, our devs are here to give you a hand!

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5