CODEWITHSUNDEEP
css
hjklemacs
hjklemacs

Reputation: 187

How to generate engraving effect in CSS?

Click Image

In the image, text just like carved in stone directly, how to generate this effect in CSS?

Upvotes: 3

Views: 6541

Answers (1)

pratikhegde
pratikhegde

Reputation: 146

Try to experiment with text-shadow property Tips :

  1. Background should be pale and text color should be deep
  2. Text shadow to be bright color. Use more than one side of text effects.

HTML:

 <span>This is Engraved Effect</span>

CSS: 

body {
  background-color: #5D8D89;  
}

span { 
    color: #3B5957;
    font-size:72px;
    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
}

Check link for reference https://jsfiddle.net/pratikhegde/vkhej5au/

Upvotes: 10

Related Questions