Charles A Upsdell

Creating Metallic Text

Metallic text can be created using non-standard CSS which is supported by most modern browsers, for example:

Large gold text can be created by this gold CSS class:

.gold     { font-weight:700; color:#D5A244; }
@supports ( -webkit-background-clip:text )
{
.gold     { background:linear-gradient(#C96,#ED9,#C96); background-clip:text; -webkit-background-clip:text;
            color:transparent; -webkit-text-fill-color:transparent;
          }
}

Smaller gold text can be created by this darkgold CSS class:

.darkgold { font-weight:900; color:#A74; }
@supports ( -webkit-background-clip:text )
{
.darkgold { background:linear-gradient(#A74,#CB7,#A74); background-clip:text; -webkit-background-clip:text;
            color:transparent; -webkit-text-fill-color:transparent;
          }
}

Note two things about this CSS:

1. The darkgold class has a heavier font weight, 900 instead of 700. This is because the darkgold class is intended for smaller text, and smaller text might fade out if the font weight weren’t heavier.
2. The CSS @supports ( -webkit-background-clip:text ) { … } is used to cope with browsers which don’t support background-clip:text;

For example using this HTML:

<span class="gold" style="font-size:2em;">Gold Text</span><br /><span class="darkgold">Gold Text</span>

Note: the CSS text-shadow property will not work with this technique.

Other Metallic Text

Other metallic text, or non-metallic text with a metallic-like sheen, can be created by varying the colours specified in the above CSS. For example:

Gold Text
Silver Text
Bronze Text
Brass Text
Copper Text
Charcoal Text
Pewter Text
Cobalt Blue Text
Midnight Blue Text

Troublesome Browsers

The above CSS defining .gold and .darkgold classes is not supported by ancient browsers, or by any version of Internet Explorer. With Internet Explorer and ancient browsers, the text appears in the inherited foreground colour, with a metallic background. For example:

It is possible with IE, however, to eliminate the background and select an alternate websafe darkgold-like text colour — #c93 — by using JavaScript of the form:

if ( navigator.userAgent.indexOf('Trident') != -1 )
{
    var sheet = document.createElement('style');
    sheet.innerHTML = '.gold, .darkgold { color:#C93 !important; background:none transparent !important; }\n';
    document.body.appendChild( sheet );
}

For example:

Websafe Gold Text

Similar JavaScript can be used to cope with other metallic-like colors, e.g. silver, bronze, copper.

Creating Metallic Text Backgrounds

Metallic text backgrounds can be created as a variant of the common class span.idigit. For example:

4

Where the CSS for the span.idigit class is similar to …

span.idigit { background-color:#191970; color:#FFF; padding-left:0.25em; padding-right:0.25em; }

… this CSS may be added …

span.idigit.gold { color:#FFF; background:linear-gradient(#C96,#E6D591,#C96); -webkit-background-clip:none; -webkit-text-fill-color:#000; font-weight:inherit; }

… enabling the metallic text background to be created by HTML of the form:

<span class="idigit gold">4</span>

Other metallic backgrounds, or non-metallic backgrounds with a metallic-like sheen, can be created by varying the colours specified for the background:linear-gradient top, middle, and bottom colours.