Paint Dripping Text in CSS

The following code snippet utilizes GSAP (GreenSock Animation Platform) and Draggable library to create a captivating paint dripping effect for text using CSS. By combining these powerful libraries with CSS filters and animations, you can achieve a visually stunning effect that will grab your audience’s attention.

The code includes HTML, CSS, and JavaScript sections. The HTML defines the necessary elements, while the CSS styles them and applies the dripping effect. The JavaScript section utilizes GSAP and Draggable to add interactivity and smooth animation to the dripping effect.

How to Create Paint Dripping Text in HTML & CSS

1. Create the HTML structure for dripping text as follows. Place your text inside the div element that has the class name “goo”.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 0 0" width="0" height="0"  style="display:none;">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> 
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
    </filter>
  </defs>
</svg>

<div class="goo">
  <h1>CodePel</h1>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
  <div class="drop"></div>
</div>

2. Use the following CSS code to style & animate paint-dripping text.

body {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
  background: #badfff;
}

.goo h1 {
  margin: 0;
  font-weight: bold;
  font-size: 240px;
  text-align: center;
  color: #007fed;
  text-shadow: 2px 2px 0 #002d54;
}

.goo {
  position: relative;
  top: 40%;
  width: 600px;
  margin: auto;
  transform: translateY(-60%);
  filter: url(#goo);
}

.drop {
  opacity: 0;
  width: 30px;
  height: 40px;
  background: #0097ed;
  border-radius: 1000px;
  position: absolute;
  animation: drip 8s infinite;
  border: 2px solid #002d54;
  border-top: none;
  top: 170px;
  left: 70px;
}
.drop:nth-child(2) {
  left: 130px;
  animation-delay: 3s;
}
.drop:nth-child(3) {
  left: 297px;
  animation-delay: 2s;
}
.drop:nth-child(4) {
  left: 203px;
  animation-delay: 4s;
}
.drop:nth-child(5) {
  left: 415px;
  animation-delay: 1.5s;
}
.drop:nth-child(6) {
  left: 509px;
  animation-delay: 5s;
}

@keyframes drip {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(30px);
  }
  50% {
    transform: translateY(110vh);
  }
  100% {
    transform: translateY(110vh);
  }
}

3. Finally, load the GSAP JS and Draggable JS just before closing the body tag to play dripping text animation.

<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/Draggable.min.js'></script>

That’s all! hopefully, you have successfully created dripping text using HTML & CSS. If you have any questions or suggestions, feel free to comment below.