CSS Smoke Background Effect

CSS smoke background effect
Table of Contents

Looking for a way to create a smoke background effect in CSS then Today I will show you how to create a CSS Smoke Background Effect. I will provide you with source of code of this CSS smoke background effect project which you can use in your project.

Here is the preview of how the CSS smoke background effect will look don’t worry you can edit the text inside the smoke effect.

CSS Smoke Background Effect Code

Copy and paste the below HTML code in your project

				
					<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<video src="https://coderzway.com/wp-content/uploads/2021/08/csssmo.mp4" autoplay muted></video>
<h1>
<span>C</span>
<span>O</span>
<span>D</span>
<span>E</span>
<span>R</span>
<span>Z</span>
<span>W</span>
<span>A</span>
<span>Y</span>
</h1>
</section>
</body>
</html>
				
			

Copy and paste the below CSS code

				
					body
{
margin: 0;
padding: 0;
}
section{
height:100vh;
background: #000;
}
section:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, red , yellow,#FF8700, yellow, red);
mix-blend-mode: color;
pointer-events: none;
}
video{
object-fit: cover;
height: 100%;
width: 100%;
}
h1{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 5em;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span{
display: inline-block;
animation: animate 1s linear forwards;
}
@keyframes animate{
0%{
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100%{
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1)
{
animation-delay:1s;
}
h1 span:nth-child(2)
{
animation-delay:2s;
}
h1 span:nth-child(3)
{
animation-delay:2.5s;
}
h1 span:nth-child(4)
{
animation-delay:3s;
}
h1 span:nth-child(5)
{
animation-delay:3.5s;
}
h1 span:nth-child(6)
{
animation-delay:4s;
}
h1 span:nth-child(7)
{
animation-delay:4.5s;
}
h1 span:nth-child(8)
{
animation-delay:5s;
}
				
			

Want to test this code now you can use our html compiler here – live html compiler. You can dowload the smoke video here click on the 3 dot menu button on the video and hit download.

I hope you found this project useful and helpful if you want more projects like this you can visit our coding projects page here – Coding Projects.

This guide is done by resources provided by this article – Css smoke by php coder.

Thank you for reading, Have a nice day 🙂

Share This Post
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles