Text shadows

Page authors can use the mcs-text-shadow property to create a blurred and shifted copy of a text that is intended to imitate a shadow effect.

Configuring text shadows

The mcs-text-shadow property accepts a sequence of comma-separated rules; each rule defines a single shadow effect in the following manner:

mcs-text-shadow: <color> <offset-x> <offset-y> <blur-radius>;

where:

<color>: The color for the shadow effect represented by a color name or a hex code.

<offset-x>, <offset-y>: Length values that define the horizontal and vertical distance of the shadow, relative to the text.

<blur-radius>: An optional length value that specifies the blur radius of the shadow; the higher the value, the bigger the blur effect and the shadow becomes wider and lighter. The default value is '0', i.e. no blur.

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
  <head>
    <title>Text shadows</title>
    <style type="text/css">
      div#simple {
        mcs-text-shadow: gray 2px -4px;
      }
      div#blur {
        mcs-text-shadow: gray 2px -4px 2px;
      }
      div#multi {
        mcs-text-shadow: gray 2px -4px 2px, yellow -2px 4px 2px;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="simple"> Simple shadow </div>
      <div id="blur"> Shadow with blur </div>
      <div id="multi"> Multiple shadows with blur </div>
    </div>
  </body>
</html>

Text shadows

Configuring text shadows

Example

Related topics