Beautiful Gilded Text with CSS

Benaiah Mischenko

5.00/5 (1 vote)

Feb 11, 2013

CPOL

1 min read

7276

Ever want to create beautiful gilding beside your text with CSS? (Here’s a demo, if you’re in a modern browser) It’s actually quite easy. Here’s how… First, some simple HTML. I’ll just give you this one: Concept 1 Minstrel Then, you need [...]

Ever want to create beautiful gilding beside your text with CSS? (Here’s a demo, if you’re in a modern browser)

It’s actually quite easy. Here’s how…

First, some simple HTML. I’ll just give you this one:

<head>
<title>Concept 1</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>

<body>

    <div class="wrap">

        <h1>Minstrel</h1>

    </div>

</body>

Then, you need to find your font. I chose Rothenburg Decorative and used a free online font converter to get all the different formats to support all browsers. With everything in place, I could then get to the @font-face declaration:

@font-face {
    font-family: 'RothenburgDecorative';
    src: url('fonts/rothenbg.eot');
    src: local('☺'), url('rothenbg.woff') format('woff'), url('rothenbg.ttf') format('truetype'), url('rothenbg.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-weight: bold;
}

This will go right at the top of your style.css file. Please note that this assumes that your font files are all in the same directory as your stylesheet. If not, change the paths accordingly.

Now we get in to the good stuff. The gilding effect will actually be created with two text shadows. The first we will offset by 2 pixels right and down and will color the same as the background. The second will be gold, and will be offset by 5 pixels right and down. Here’s the code for that:

h1 {
    font-family: 'RothenburgDecorative'; /*Pull in our font we declared earlier*/
    text-shadow:    2px 2px #ECECEC,
                    5px 5px #FDD017;
}

And we’re done with the gilding! Now all that’s left is some other typography stuff to make it look good. Just add this to your h1 block:

font-size: 140px;
letter-spacing: .15em;
text-align: center;

And add this between the @font-face and the h1 blocks (just to get the background set up):

html {
    background-color: #111;
}

.wrap {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    background-color: #ECECEC;
    padding: 10px 50px 10px 50px;
}

Tada! Your very own gilded fancy text.