Engraved and Embossed Text Using HTML & CSS

March 1, 2018 11:11 am by ATS Staff

<span class="engraved">Engraved</span>
<span class="embossed">Embossed</span>

<style type="text/css"> 	
	.engraved {
	    font-size: 100px;
	    font-family: Arial;
	    background-color: #666666;
	    -webkit-background-clip: text;
	    -moz-background-clip: text;
	    background-clip: text;
	    color: transparent;
	    text-shadow: rgba(245,245,245,0.5) 3px 5px 1px;
	 }

	.embossed{
	  color: #f0f0f0;
	  font-size: 100px;
	  font-family: Arial;
	  background-color: #666666;
	  text-shadow: 1px 4px 4px #555;
	  text-align: center;
	  -webkit-background-clip: text;
	    -moz-background-clip: text;

	}
 </style>