menu
text-shadow is the CSS property that is used to add a shadow effect to text, creating the illusion of depth - it’s not commonly used in moderns designs, but if you want to have a play with it, here it is.
taught by Tina May
You need to at least set your text shadow with 2 values in pixel - the first value being offset-x (horizontal) and the second value being offset-y (vertical).
text-shadow:
Tip: Shadows will fall to the right of the text when offset-x is positive, and to the left when offset-x is negative. Meanwhile, shadows will fall below the text when offset-y is positive and go to the top when offset-y is negative. If both values are zero, the shadow will sit right behind the text.
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can add blur to your text shadow as a third value, also in pixel.
text-shadow:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can choose what color you want your text shadow to be. It accepts HEX, RGB or RGBA color codes, and can go along with or without the blur.
text-shadow:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can add multiple set of text shadow in a single property declaration:
text-shadow:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
</div>What's brewing, good looking?
/* Change your heading's text shadow*/
h2 { text-shadow: 1px 1px 4px rgba(187, 226, 217, 0.75), 2px 2px 2px rgb(97, 188, 167, 0.5); }
/* Change your paragraph's text shadow*/
p { text-shadow: 1px 1px 4px }
Try changing the shadow of both the heading and the paragraph we’ve added below. Test out what happens when you just add a pair of directional values, and then colors, blur sizes and finally multiple text shadows in one go.
Try these (or anything else!):
Copyright 2023