MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts

CSS Stroke Animation | Animated Text Background With CSS Stroke | Pure Html & CSS

CSS Animation | MultiWebPress

Hello readers, today in this blog you’ll learn how to create CSS Stroke Animation using pure HTML & CSS only. This program is for beginners who really want to learn new stuff using HTML & Css. Recently, I have shared a Typing text animation. Now it’s time to create an Animated text background with CSS Stroke effect using HTML & CSS.

How cool would it look if your text has some background effect or animation? Yes of course it will look very cool and awesome and it will make your website more creative.

To create this amazing animated text we have used some easiest methods such as CSS background-clip property,  It will specify how far the background-color should be from the element.

Background-clip – The foreground text painted within the background.

In this we need to use @keyframes, which will help us to specify what should happen at specific animation moments during style waypoints along the animation sequence.

As you can see in the above images, there is text showing a CSS Stroke text with an animated background. This will make your website very cool and awesome. There are numerous ways to create animation, one of which is the CSS Stroke text with animated background.

If you’re having difficulty in understanding what is written in this blog. You can also watch the full video just scroll down below.

Video tutorial of CSS Stroke text with an animated background

You may also like:

I believe you like this  CSS Stroke text with an animated background. You can also use this animation CSS text on your website or any project you want. And you can take this CSS Animation stroke to the next level with your creativity. Also I want you all to comment below if you have any question in your mind. Let’s move to the next step.

If you like the CSS Stroke text with an animated background and want to get codes for this, you just need to scroll down.

CSS Stroke text with an animated background [Source Codes]

To create this small task (CSS Stroke text with an animated background). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

Let’s create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with .html extension

HTML CODE

				
					<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

        <h1 class="text">Multiwebpress</h1>
</body>
</html>

Next, create a Cascading Style Sheet(CSS) with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with .css extension

CSS

				
					*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    background: #eee;
    display:grid;
    place-items:center;
    min-height: 75%;
}

.text{
    font-size: 14vh;
    font-family: cursive;
    -webkit-text-stroke: transparent 1.5vw;
    text-transform: uppercase;
    letter-spacing: 2vw;
    background:linear-gradient(90deg, #c287e8 50%, #000 50.1%);
    background-size: 40px;
    -webkit-background-clip: text;
    background-clip: text;
    color:#eee; 
    text-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    animation: text 1s linear infinite;  
}

@keyframes text{
    0%{
        background-position-x: 0px;
    }
    100% {
        background-position-x: -40px;
    }
}

After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully created a CSS Stroke text with an animated background using HTML & CSS.

If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on instagram.

Thanks in Advance!

Download Code Files

SHARE

WhatsApp
Facebook
Twitter
LinkedIn
Telegram
How to install wordpress plugin?

Leave a Reply

Your email address will not be published. Required fields are marked *

MOST POPULAR
SHARE
CATEGORY
Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Facebook-f Youtube Instagram Twitter

Copyright © 2023 MultiWebPress | All Rights Reserved