Do you remember those childhood days when we all loved eating 🍭candy?
In today's tutorial, we are bringing back those sweet memories by creating a CSS candy cane text effect.
We will create this candy cane effect using a CSS linear-gradient() function. I have also created a YouTube tutorial for this text effect—feel free to follow along step by step if you need any help.
Table of Content
Project Folder Structure:
Before we start coding the Candy Cane Effect, create a folder for the project. Inside that folder, make two files named index.html and style.css—these will be your HTML document and stylesheet.
If you are still having trouble setting up your project, check out our detailed guide on How to Structure an HTML Project to learn the proper folder setup.
HTML:
Let us start by adding the Audiowide font CDN to our HTML document. To do this, just copy the code below and paste it inside the head tag of your HTML file.
This will load the Audiowide font directly from Google Fonts, which we will later apply to our text in CSS.
Now let us write a simple one-line HTML code. All we need to do is add a span element containing any text you like.
<span>Candy Cane</span>Live Demo:
Below is a live demo to help you see how the candy cane text works. Click "Run Code" to see the text effect live.
CSS:
Styling Body:
Now, let us setup the document body. We don’t need any margin or padding, so we will set both to 0. Next we will give the body a light pink background using the hex code #eab7be. Finally, we will apply the Audiowide font from Google Fonts to give our text a stylish look.
body {
margin: 0;
padding: 0;
background: #eab7be;
font-family: "Audiowide", sans-serif;
}Styling Text:
We used the transform method to center the text. Here we have centered the span element using the CSS position, transform, top and left properties.
For text styling, we applied the text-align, font-size, and font-weight properties—you can adjust these values however you want to get the look you want.
Next, before we move on to choosing the colors, we need to set the gradient direction. In this case, we will create the gradient at a -45 degree angle (from the top left to the bottom right).
This will give the text a zebra crossing pattern, with red and light gray colors alternating in equal parts. The color transition will be every 25%, creating that candy cane sticks effect.
span {
/*Transform method*/
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
/*basic text style*/
text-align: center;
font-size: 8em;
font-weight: bold;
/*Candy Cane backround*/
background: linear-gradient(-45deg,
#e41c23 25%,
#f7f7f7 25%,
#f7f7f7 50%,
#e41c23 50%,
#e41c23 75%,
#f7f7f7 75%,
#f7f7f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 50px 50px;
background-position: 0 0;
/*stripes animation*/
animation: stripes 1s linear infinite;
}Setting the Keyframes:
Keyframes are where the magic happens! We use them to animate the background position of the text. By setting the background-position to 100%, the stripes smoothly move to the right. This creates a flowing animation.
@keyframes stripes {
100% {
background-position: 50px 0, 50px 0, 50px 0;
}
}And that’s it—your sweet CSS Candy Cane Text Effect is ready.
I hope you all enjoyed this tutorial. For more quick updates and coding tips, check out our YouTube channel. If you have any questions, just leave a comment below. Bye Bye. See you in the next tutorial!
0 Comments