In this tutorial you will learn how to create Liquid Text Effect using HTML and CSS. If you want to make the heading of your website attractive then you can use this text animation effect.
Creating this CSS Liquid Text Effect is very easy if you know basic html and css. I have used blue color in this liquid filling effect. You can use any color according to the theme of your site.
CSS Liquid Text Effect
In the world of web design, creating visually appealing and dynamic text effects can significantly enhance the overall user experience.
One such captivating effect is the liquid text effect, which gives the illusion of text floating in a liquid or fluid-like environment. In this tutorial, we’ll explore how to achieve this mesmerizing liquid text effect using HTML and CSS.
See the Pen Liquid text animation by ManonSAUVAGEOT (@manonsauvageot) on CodePen.
Hope you like this CSS Liquid / Water Effects. You can copy the source code from the demo section above if you want. In the meantime I have created a collection of CSS Liquid Button Effects. Where you will find many types of Liquid animations.
Liquid Text Animation Effect with HTML CSS
Now it’s time to create this Liquid Text Effect with HTML and CSS. Since this is a simple design I have put all the code together. You can copy them and use them in your project.
Step 1: Liquid Text Effect HTML Code
Let’s start by creating the basic HTML structure for our project. Open your favorite code editor and create an HTML file with the following content.
<div class="liquid">
<h1>Water</h1>
<h1>Water</h1>
<h1>Water</h1>
<h1>Water</h1>
</div>Step 2: Liquid Text Effect CSS Code
Now, let’s move on to the CSS to bring our liquid text effect to life. Create a file named styles.css and link it to your HTML file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.liquid
{
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #183954;
}
.liquid h1
{
position: absolute;
font-size: 26vw;
}
.liquid h1:nth-child(1)
{
color: #fff;
text-shadow: -2px 2px 0px #183954,
-4px 4px 0px #183954,
-6px 6px 0px #183954,
-8px 8px 0px #183954,
-18px 18px 20px rgba(0,0,0,0.5),
-18px 18px 50px rgba(0,0,0,0.5);
}
.liquid h1:nth-child(2)
{
color: #2196f3;
animation: animate 3s ease-in-out infinite;
}
.liquid h1:nth-child(3)
{
color: #2196f3;
opacity: 0.5;
animation: animate 6s ease-in-out infinite;
}
.liquid h1:nth-child(4)
{
color: #2196f3;
opacity: 0.5;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate
{
0%, 100%
{
clip-path: polygon(0 45%, 13% 40%, 30% 42%, 44% 52%, 60% 63%, 78% 69%, 100% 66%, 100% 99%, 0% 99%);
}
50%
{
clip-path: polygon(0 43%, 15% 53%, 28% 60%, 48% 61%, 63% 53%, 81% 48%, 100% 52%, 100% 99%, 0% 99%);
}
}Feel free to experiment with different colors, fonts, and animation properties to customize the liquid text effect to suit your design preferences.
Hope you like this CSS Liquid Text Effect. If there is any problem you can comment me. Be sure to check out the Liquid Effect collection I created in the meantime.