Blog Post: Easy Text Shadow

Red Deer & Blackfalds Web Design Writes:

One of the most underutilized and easy pieces of CSS is the text-shadow property! Such an easy and fun way to make bits of font on your website stand out and become instantly more legible. CSS3 has allowed the use of not only different angles of text-shadow, but also different gradients so that you can accommodate any situation.

Text shadow property is structured as such: {text-shadow: horizontal-pixel-alignment, vertical-pixel-alignment, blur-radius, colour-of-shadow;}, or rather as an example {text-shadow: 1px 1px 1px rgba(0,0,0,1);}

Below are examples of different text shadows on a subtle grey background, complete with the CSS. Some examples may be more functional than others; however, still important to understand the different editable portions of this bit of CSS.

Example One

{text-shadow: 1px 1px 0px rgba(0,0,0,1)}


Example Two

{text-shadow: 0px 0px 7px rgba(0,0,250,1)}


Example Three

{text-shadow: 1px 1px 20px rgba(90,0,90,1)}


Example Four

{text-shadow: 11px 11px 0px rgba(0,220,0,1)}


Example Five

{text-shadow: 21px 1px 0px rgba(20,20,0,1)}

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)