Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Text Shadows

Posted by Dakota Marcinak
Dakota Marcinak
8,384 Points

text shadow blur not working

in the example of making the text shadow have a blur effect. my project only recognizes the 0 value. 

h1 {  
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  text-shadow: -5px, 8px, 0, #222;

anything other than 0 (ex: text-shadow: 5px 8px 1 #222;) it doesn't even give a shadow anymore. I'm using chrome on a windows pc.

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

If you inspect the element in developer's tools you'll see:

text-shadow: -5px, 8px, 0, #222;

or

text-shadow: 5px 8px 1 #222;

lined out with an error message: invalid property value. The first is due to the commas. The second is missing a unit of measurement.

This works:

text-shadow: 5px 8px 1px #222;

Reason why 0 doesn't need a unit of measurement from MDN

The <length> data type consists of a <number> followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number. The length unit is optional after the number 0.