{"id":306182,"date":"2020-04-20T06:58:18","date_gmt":"2020-04-20T13:58:18","guid":{"rendered":"https:\/\/css-tricks.com\/?p=306182"},"modified":"2020-04-23T15:10:23","modified_gmt":"2020-04-23T22:10:23","slug":"creating-playful-effects-with-css-text-shadows","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-playful-effects-with-css-text-shadows\/","title":{"rendered":"Creating Playful Effects With CSS Text Shadows"},"content":{"rendered":"\n

Let\u2019s have a look at how we can use the CSS text-shadow property to create truly 3D-looking text. You might think of text-shadow as being able to apply blurred, gradient-looking color behind text, and you would be right! But just like box-shadow, you can control how blurred the shadow is, including taking it all the way down to no blur at all. That, combined with comma-separating shadows and stacking them, is the CSS trickery we\u2019ll be doing here.<\/p>\n\n\n\n\n\n\n\n

By the end, we\u2019ll have something that looks like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n

Quick refresher on text-shadow<\/h3>\n\n\n

The syntax is like this:<\/p>\n\n\n\n

.el {\n\u00a0 text-shadow: [x-offset] [y-offset] [blur] [color];\n}<\/code><\/pre>\n\n\n\n
  • x-offset<\/code>: Position on the x-axis. A positive value moves the shadow to the right, a negative value moves the shadow to the left. (required)<\/em><\/li>
  • y-offset<\/code>: Position on the y-axis. A positive value moves the shadow to the bottom, a negative value moves the shadow to the top. (required)<\/em><\/li>
  • blur<\/code>: How much blur the shadow should have. The higher the value, the softer the shadow. The default value is 0px (no blur). (optional)<\/em><\/li>
  • color<\/code>: The color of the shadow. (required)<\/em><\/li><\/ul>\n\n\n\n