How to Create a CSS Text Embossing Effect

Embossing is a graphical effect used to give the impression that the surface of an image has been raised or pressed in. In web design, an embossed text effect can give your typography a three-dimensional look and feel, often lending an elegant and sophisticated touch to your web pages. With the power of CSS, we can create an embossing text effect without the need for any images or additional software. Let’s explore how to accomplish this.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

HTML Setup

We start with a basic HTML setup – a <div> element with a class of embossed-text:

<div class="embossed-text">
  Embossed
</div>

Creating the CSS Text Embossing Effect

Next, we turn our attention to the CSS, which gives us the desired embossing effect. We’re using the bold and distinctive Truculenta font:

@import url("https://fonts.googleapis.com/css2?family=Truculenta:wght@900&display=swap");

.embossed-text {
 font-family: "Truculenta", sans-serif; /* Set the font to Truculenta */
 font-size: 4em; /* Increase the text size */
 background: #f8bf32; /* Set the warm, summer-like background color */
 color: #2b1e0d; /* Set a rich dark color for the text */
 text-align: center; /* Center align the text */
 padding: 50px; /* Add padding around the text */
 box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Create depth with a box shadow */
 text-shadow: -2px -2px 1px rgba(255, 255, 255, 0.6),
  3px 3px 3px rgba(0, 0, 0, 0.4); /* Create the embossed effect */
}

Let’s break down each CSS property:

• font-family: 'Truculenta', sans-serif; – This sets our text font to Truculenta, a bold and punchy font that is excellent for effects like this.
• font-size: 4em; – This sets the size of our text, making it large enough and noticeable. An embossed effect works well with larger font sizes, and 4em is a suitable size for demonstration.
• background: #F8BF32; and color: #2B1E0D; – These set the background color of our container to a warm summer color, and the text color to a rich dark tone. The contrast between the two colors enhances the embossed effect.
• text-align: center; and padding: 50px; – These center our text and provide padding around it, ensuring the embossed text is well-positioned and well-spaced.
• box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); – This adds a box shadow around our container, enhancing the depth effect.
• text-shadow: -2px -2px 1px rgba(255, 255, 255, 0.6), 3px 3px 3px rgba(0, 0, 0, 0.4); – This property is the main focus, creating the embossed effect. The text-shadow property is defined by two shadows here:
  • A light shadow is positioned at the top left (-2px -2px 1px rgba(255, 255, 255, 0.6)). This acts like a light source, contributing to the illusion of depth.
  • A darker shadow is applied at the bottom right (3px 3px 3px rgba(0, 0, 0, 0.4)). This adds to the effect by mimicking a shadow, further enhancing the embossed look.

Through these simple steps, you’ve created an embossed text effect using CSS.

The Result

See the Pen
Spinner Loader with Pure CSS by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Final Thoughts

Adding an embossed effect to your text with CSS can introduce a subtle, tactile element to your website. As a designer, it’s one more tool in your toolkit to help differentiate your site. Remember, though, that like all design elements, it should be used thoughtfully and not in excess. It works best when applied to headers or highlighted text, where it can add emphasis without being overbearing.

The beauty of CSS lies in its flexibility and depth. With some experimentation, you can adapt this CSS text embossing effect to suit your design aesthetic. Enjoy exploring the possibilities!