Create a 3D Text Effect using HTML and CSS and jQuery

In this article, we will understand about the how to Create a 3D Text Effect using HTML and CSS and jQuery with the help of various examples. The 3D text animation effect is designed by using the text-shadow property. With the use of 3D text effect, we have a different thickness of shadow for each alphabet and at each angle.

Following are the various examples of Create a 3D Text Effect using HTML and CSS and jQuery.

Example 1:

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS  </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jquery.com/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
body {
	height: 100%;	
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
.box {
	display: flex;
}
.box .inner {
	width: 400px;
	height: 200px;
	line-height: 200px;
	font-size: 4em;
	font-family: sans-serif;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
}
.box .inner:first-child {
	background-color: indianred;
	color: darkred;
	transform-origin: right;
	transform: perspective(100px) rotateY(-15deg);
}
.box .inner:last-child {
	background-color: lightcoral;
	color: antiquewhite;
	transform-origin: left;
	transform: perspective(100px) rotateY(15deg);
}
.box .inner span {
	position: absolute;
	animation: marquee 5s linear infinite;
}
.box .inner:first-child span {
	animation-delay: 2.5s;
	left: -100%;
}
@keyframes marquee {
	from {
		left: 100%;
	}
	to {
		left: -100%;
	}
}
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS </h2>
<div class = "box">
  <div class = "inner">
    <span> Hello World </span>
  </div>
  <div class = "inner">
    <span> Hello World </span>
  </div>
</div>
</body>
</html>

Explanation:

In the above example, we created an example of 3D Text Effect using HTML and CSS.

Output:

Following is the output of this example.

Create a 3D Text Effect using HTML and CSS and jQuery

Example 2:

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS and jquery </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jquery.com/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
body {
	height: 100%;	
	align-items: center;
	justify-content: center;
	 background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%);
}
.wrapper {
  width: 100%;
  font-family: "Source Code Pro", monospace;
  margin: 0 auto;
  height: 100%;
}
.wrapper h1 {
  text-transform: uppercase;
  transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
  font-size: 20vw;
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
  text-rendering: optimizeLegibility;
  font-weight: 900;
  color: rgba(255, 158, 177, 0.5);
  text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
  white-space: nowrap;
}
.wrapper h1:before {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: -4.8%;
  overflow: hidden;
  width: 100%;
  height: 50%;
  color: #fbf7f4;
  transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
  z-index: 2;
  text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.2);
}
.wrapper h1:after {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #d3cfcc;
  transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.3);
}
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS and jQuery </h2>
<div class = "wrapper">
	<h1 contenteditable data-heading = "3D Effect"> 3D Effect </h1>
</div>
<script>
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});
</script>
</body>
</html>

Explanation:

In the above example, we created an example of 3D Text Effect using HTML, CSS and jquery.

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS and jquery </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jquery.com/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
  height: 100%;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: rgba(206,188,155,1);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(206,188,155,1)), color-stop(51%, rgba(85,63,50,1)), color-stop(100%, rgba(42,31,25,1)));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=1 );
}
h1 {
  width: 100%;
  margin: 0 auto 0 auto;
  font-family: 'Lato', sans-serif;
  line-height: 280px;
  font-size: 11.5rem;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}
h1::before {
  content: " ";
  width: 100%;
  height: 750px;
  position: absolute;
  top: -200px;
  left: 10px;
  transform: rotate(55deg);
  background: rgba(206,188,155,.7);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(206,188,155,.7)), color-stop(65%, rgba(42,31,25,0)));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=0.7 ); );
}
#text3d {
    color: #70869d;
    letter-spacing: .15em;
    text-shadow: 
      -1px -1px 1px #efede3, 
      0px 1px 0 #2e2e2e, 
      0px 2px 0 #2c2c2c, 
      0px 3px 0 #2a2a2a, 
      0px 4px 0 #282828, 
      0px 5px 0 #262626, 
      0px 6px 0 #242424, 
      0px 7px 0 #222, 
      0px 8px 0 #202020, 
      0px 9px 0 #1e1e1e, 
      0px 10px 0 #1c1c1c, 
      0px 11px 0 #1a1a1a, 
      0px 12px 0 #181818, 
      0px 13px 0 #161616, 
      0px 14px 0 #141414, 
      0px 15px 0 #121212,
      2px 20px 5px rgba(0, 0, 0, 0.9),
      5px 23px 5px rgba(0, 0, 0, 0.3),
      8px 27px 8px rgba(0, 0, 0, 0.5),
      8px 28px 35px rgba(0, 0, 0, 0.9);
 }
#text3d:hover {
    color: #70869d;
    letter-spacing: .15em;
    text-shadow: 
      -1px -1px 1px #efede3, 
      0px 1px 0 #2e2e2e, 
      0px 2px 0 #2c2c2c, 
      0px 3px 0 #2a2a2a, 
      0px 4px 0 #282828, 
      0px 5px 0 #262626, 
      0px 6px 0 #242424, 
      0px 7px 0 #222, 
      0px 8px 0 #202020, 
      0px 9px 0 #1e1e1e, 
      0px 10px 0 #1c1c1c, 
      0px 11px 0 #1a1a1a, 
      0px 12px 0 #181818, 
      0px 13px 0 #161616, 
      0px 14px 0 #141414, 
      0px 15px 0 #121212,
      2px 20px 5px rgba(0, 0, 0, 0.9),
      5px 23px 5px rgba(0, 0, 0, 0.3),
      8px 27px 8px rgba(0, 0, 0, 0.5),
      8px 28px 35px rgba(0, 0, 0, 0.9);
 }
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS and jquery </h2>
<h1 id = "text3d"> 3D Effect </h1>
</body>
</html>

Explanation:

In the above example, we created an example of 3D Text Effect using HTML and CSS.

Output:

Following is the output of this example.

Example 4:

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of Create a 3D Text Effect using HTML and CSS and jquery </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src =
"https://code.jquery.com/jquery-3.5.1.min.js">
		</script>				
		<script src =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>		
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: white; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h4  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
  color: white;
}
html {
  height: 100%;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: rgba(206,188,155,1);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(206,188,155,1)), color-stop(51%, rgba(85,63,50,1)), color-stop(100%, rgba(42,31,25,1)));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=1 );
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --color-primary: #f6aca2;
  --color-secondary: #f49b90;
  --color-tertiary: #f28b7d;
  --color-quaternary: #f07a6a;
  --color-quinary: #ee6352;
}
body {
  min-height: 100vh;
  font-family: canada-type-gibson, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: #eff8e2;
}
.content {
  display: flex;
  align-content: center;
  justify-content: center;
}
.text_shadows {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
    9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(2rem + 5vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}
@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}
@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
</style>
<body>
<h4> Example </h4>
<h2> Create a 3D Text Effect using HTML and CSS and jquery </h2>
<div class = "content">
  <h2 class = "text_shadows"> 3D Text Effect </h2>
</div>
</body>
</html>

Explanation:

In the above example, we created an example of 3D Text Effect using HTML and CSS.

Output:

Following is the output of this example.

Next TopicJquery Flickerplate Plugin

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}