How to Create Engraved Text Effect

In this blog, we will share another simple yet interesting snippet about the CSS text Effect. This project is about how to create a basic Engraved Text Effect using HTML and CSS. Have a look at the video demo below to get an idea about the snippet. Thousands of videos on front-end development can be found on our YouTube Channel. You can subscribe to our channel if you like what you see.

I hope you have watched the video demo. The Engraved can be used as either a content heading or a sub-heading. It can make the heading look more attractive and pleasing. The engraved text effect can be created using a couple of different methods. By using the text-shadow property we will generate the desired effect after we create a basic text.

You may also like:

How to Create Engraved Text Effect [ Source Code ]:

You have to create two files in order to make this. There are two files, one with a .CSS and the other with a.html extension. The External CSS file must be connected with the HTML file. To use the code in your project, copy and paste it into your project. You can download the code from the button below if it doesn't work in your browser.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Engraved Text Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <h2>John Doe <span>Died: 1st June, 2022</span></h2>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background-image: url(1.jpg);
	background-size: cover;
	background-position: center center;
	height: 100vh;
}
.content {
	font-family: serif;
	font-size: 6em;
	position: absolute;
	text-transform: uppercase;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: transparent;
	background: #575757;
	-webkit-background-clip: text;
	background-clip: text;
	text-align: center;
	text-shadow: -4px 8px 7px rgba(255, 255, 255, 0.3);
}
.content h2 span {
	display: block;
	font-size: 55px;
}
.content h2 span {
	display: block;
	font-size: 55px;
}

I hope the code was implemented correctly. There are lots of projects related to HTML, CSS, and javascript on our Website. Below the homepage, you can click the load more button to see the snippets. You can share what you see with other people if you like it. We want to let you know how much we appreciated your visit.

DOWNLOAD CODE

How to Create Engraved Text Effect [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

How to Create Engraved Text Effect

How to Create Engraved Text Effect [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form