Page Widget How to - Create inset text on gradient background using text-shadow

Question

We would like to know how to create inset text on gradient background using text-shadow.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!--from w  ww  . ja v  a  2  s. c  o  m-->
  height: 100%;
}

body {
  background: #87e0fd;
  background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd),
    color-stop(100%, #05abe0));
  background: -webkit-linear-gradient(top, #87e0fd 0%, #05abe0 100%);
  background: -o-linear-gradient(top, #87e0fd 0%, #05abe0 100%);
  background: -ms-linear-gradient(top, #87e0fd 0%, #05abe0 100%);
  background: linear-gradient(top, #87e0fd 0%, #05abe0 100%);
  background-attachment: fixed;
}

h1 {
  color: #555;
  font-size: 72px;
  text-align: center;
  text-shadow: 0 1px 2px #fff;
  margin: 80px 0 0;
}
</style>
</head>
<body>
  <h1>Howdy Guys!</h1>
</body>
</html>

The code above is rendered as follows: