Home » Internet » Web Designing » How to create a beveled text effect with CSS

How to create a beveled text effect with CSS



You can easily create the beveled text effect using CSS. Although you may wonder why learn a new technique to create the beveled text effect when you can easily do it in an image editing software, the advantage of using CSS is that once you have defined a class, you can invoke the effect wherever you want to.

There is no dedicated style attribute in CSS that creates the bevel effect but you can use the CSS text shadow effect to attain the same. You just need to choose the right colors.

For better effect, chose a darker shade of background for the beveled effect because then you can see it clearly. For instance this looks fine:

beveled-text-effect-css-1

But if you choose a very light background, the bevel effect will not look as good:

beveled-text-effect-css-2

So it’s all about what color you choose. Getting back to creating the beveled text effect with CSS, the following definition does the trick (the better one among the above examples):

<style>
        .container{
                background-color: #8295CC;
                width:300px;
                height:100px;
                text-align:center;
                padding-top:30px;
        }
        .bev{
                color:#394F91;
                font-size:2em;
                font-family:sans-serif;
                text-shadow: 0px 1px 0px #C8D0E7;
                font-weight:bold;
        }
</style>

And this is how we use it:

<div class=”container”>
        <h1 class=”bev”>HowToPlaza</h1>
</div>

It’s basically using the color of the shadow, and then strategically placing it in such a manner that it creates the bevel effect. In this effect the text should either appear raised or engraved. In our case we’re raising the text. So over a dark background we’ve used a lighter color shadow under a darker text. This gives you the desired beveled text effect. You can keep changing the CSS color values according to your need.