Metal Text Effect using CSS

Metal Text Effect using CSS:- this is not a CSS animation but it’s an awesome  CSS effect that teaches you about CSS.

Metal Text Effect using CSS

MetalText.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title></title>
  </head>
  <body>
    <h3>Metal Text Effect</h3>
    <h1>
      <span>CodeSnail</span>
      <span>CodeSnail</span>
    </h1>
  </body>
</html>

Style.css

body{
  margin: 0;
  padding: 0;
  background:url(bg.jpg);
  background-size: cover;

}
h3{
  color:white;
  text-align: center;
  font-size: 4em;
  margin-top: 10%;
  font-family: tahoma;
  color: #929495;
}
h1>span{
  /*color:white;*/
  top:35%;
  position: absolute;
  transition: translateY(-50%);
  margin: 0;
  padding: 0;
  width:100%;
  text-align: center;
  font-family: sans-serif;
  font-style: italic;
  font-size:4em;
  text-transform: uppercase;
  letter-spacing: 5px;
  background:linear-gradient(#262626,#eaeaea,#262626);
  -webkit-background-clip: text;
  color:transparent;
}
h1>span:nth-child(1)
{
  z-index: 2;
}
h1>span:nth-child(2)
{
  z-index: 1;
  text-shadow: 1px 1px 0 #262626, 2px 2px 0 #262626, 3px 3px 0 #262626,
  4px 4px 0 #262626, 5px 5px 0 #262626, 1px 1px 0 #262626, 6px 20px 20px rgba(0,0,0,1),
  -1px -1px 0 #fff;
}

Output

metal text effect using css, css effect, text effect using css, css


So this the code of Metal Text Effect using just CSS. For Source code and Material click on Download Button and for video tutorial click here: https://bit.ly/2HZRMWp I also learn from this channel. Download the code here:Download You may also like:

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee
Your subscription could not be saved. Please try again.
Your subscription has been successful.

Newsletter

Subscribe to our newsletter and stay updated.

Leave a Comment