HomeTutorsContact

How To Create Impressed & Embossed Effect In CSS?

By Gulshan Saini
Published in CSS
May 13, 2020
1 min read

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

<h2
  style={{
    'background-color': '#6990e1',
    color: '#31446B',
    padding: '10px',
    'font-size': '50px'
  }}
>
  tutorial.tips
</h2>

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

text-shadow: 0 -1px 1px #b3d6f9, 0 1px 0 #243350;

Result

<h2
  style={{
    'background-color': '#6990e1',
    color: '#31446B',
    padding: '10px',
    'font-size': '50px',
    'text-shadow': '0 -1px 1px #b3d6f9, 0 1px 0 #243350'
  }}
>
  tutorial.tips
</h2>

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

<h2
  style={{
    'background-color': '#31446B',
    color: '#92B1EF',
    padding: '10px',
    'font-size': '50px'
  }}
>
  tutorial.tips
</h2>

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

text-shadow: 0 -1px 0 #243350, 0 1px 0 #def2fe;

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

Result

<h2
  style={{
    'background-color': '#31446B',
    color: '#92B1EF',
    padding: '10px',
    'font-size': '50px',
    'text-shadow': '0 -1px 0 #243350, 0 1px 0 #def2fe'
  }}
>
  tutorial.tips
</h2>

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?

Related Posts

CSS
How to use CSS custom variables and properties?
June 06, 2020
2 min
Gulshan Saini

Gulshan Saini

Fullstack Developer

Topics

Angular
JavaScript
ReactJS
Typescript

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media