In this project we will make a simple text animation that displays matrix code in the background using Html and Css.

Here is the folder structure.

• index.html
• style.css

To download the source code: Click here description

The most important property here is the background-clip.It sets whether an element's background extends underneath its border box, padding box, or content box.

The background-clip is best explained in action, so I've put together a video to show how it works.

Watch the video.

Html code

Place that h1 heading between in the body section.

<h1>oston code</h1>

Css code

/*Removes all the margin and padding on the page*/
*{
	margin:0;
	padding:0;
}


/*Applys styling to the h1 tag*/
h1{
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	font-size: 160px;
	font-weight: 800;
	font-family: sans-serif;
	color:transparent;
	background-image:url('https://media0.giphy.com/media/A06UFEx8jxEwU/200.webp?cid=790b76115cd431c47270576451361399&rid=200.webp');
	background-position: center;
	background-clip:text;
	-webkit-background-clip:text;
}

I now spend most of my day creating the best content I possibly can to give away free. If I have helped you in any way please consider becoming a SUBSCRIBER on my channel.