HomeTutorsContact
CSS
How To Create Impressed & Embossed Effect In CSS?
Gulshan Saini
May 13, 2020
1 min

Lets see how we can add depth or shallow effect to text using text-shadow. Main things that are critical in making these type of effects are the background and text colors and rest is magic of text shadows.

Impressed and Embossed Effect
Impressed and Embossed Effect

Lets start with basic text, without any shadow effect

Impressed Effect

To create impressed effect, we will push down the first shadow by 1px on Y-axis and for second shadow we are going to raise the shadow on Y-axis by 1px.

Also, for first shadow we will add 1px blur radius

Result

Embossed Effect

For embossed text we want the background to be darker than the text itself.

Starting again with basic text, without any shadow effect

To create embossed effect, we will push down the first shadow by 1px on Y-axis and for second shadow we are going to raise the shadow on Y-axis by 1px

The only difference here is we are going to remove the blur radius we applied in previous effect

Result

Did you notice the difference between two effect?

In first one the text look raised where as in the second one it appear to be pushed inside.

Read more on css text shadow


Tags

#css
Previous Article
How To Create Glowing Text In CSS?

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to use CSS custom variables and properties?
June 06, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media