How To Make 3D Text Shadow using of CSS HTML

October 1, 2022October 1, 2022 M-SoftTech 0 Comments

hello viewer, welcome to m-softtech. In this article I will teach you how to create a 3d text shadow using of html CSS only. if we want to create a shadow. then CSS provide two shadow feature one is text-shadow and other one is box-shadow. if you have belonged a programming background then you know that’s two features as well. but in this article, I will make 3d text shadow in the help of html and CSS. so, let’s start our article. first step we create a html document and CSS document. and we link CSS file in html also. When we are complete these steps. then we create a h1 heading tag in inside of our html document and set h1 tag data-text is shadow. I will share you all these codes also you can see that’s thing in code also. if you have faced any problem to understanding the article.

How to make Vertical Animated Navbar Using HTML & CSS

after that we work on your CSS document. we are set background color our body tag and align center our body tag inside elements. you can see in CSS document. I will share that in article

<!DOCTYPE html>
<html>
<head>
	<title>3d Text Shadow</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

	<h1 data-text="Shadow">Shadow</h1>

</body>
</html>

CSS Code

body{
  background:#3a3232;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
h1{
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: 165px;
  background: linear-gradient(-90deg, rgb(241 208 208) 0%, rgb(96 78 78) 100%);
  line-height: 1;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  position: relative;
  letter-spacing: 5px;
}
h1:before{
  -webkit-background-clip:none;
  content: attr(data-text);
  -webkit-text-fill-color:black;
  z-index: -1;
  position: absolute;
  filter: blur(5px);
  transform: skew(64deg, 0) translate(-20%, 15%) scaleY(0.5);
  -webkit-mask-image:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
  margin-left: 33px;
}

CSS GRID GALLERY ANIMATION | PURE CSS ANIMATION

if you have any problem to understand these code so you can please watch this video tutorial also it maybe help you.