Page Widget How to - Create font shadow with text-shadow








Question

We would like to know how to create font shadow with text-shadow.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.Text {<!--from  ww  w  .j ava  2 s  . co m-->
  font-family: sans-serif;
  background-color: #222;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: rgba(255, 255, 255, 0.4) 0px 3px 3px;
}

h1 {
  font-size: 65px;
  margin-top: 30px;
  margin-left: 65px;
}

body {
  background-color: #b3b3b3;
}
</style>

</head>
<body>
  <h1 class="Text">java2s.com</h1>
</body>
</html>

The code above is rendered as follows: