Pure CSS Morphing Text Effect with Gooey Transitions

Gooey Text is a pure CSS effect that creates a smooth, liquid-like transition between text elements.

It uses CSS filters and animations to achieve a morphing effect without any JavaScript, SVG, or Canvas dependencies.

Features:

• Customizable Timing: Control animation duration and transition speed by adjusting animation-duration values.
• Scalable Text Support: Handles multiple text items (2, 3, 4, or more) with calculated timing functions for each configuration.
• Filter-Based Effect: Uses blur and contrast filters to create the gooey morphing appearance during transitions.
• Cross-Browser Compatible: Works in modern browsers that support CSS animations and the filter property.

See It In Action:

Use Cases:

• Hero Section Taglines: Rotate between multiple value propositions or product features on a landing page.
• Brand Identity Showcases: Display different brand names, product lines, or service categories with a distinctive visual effect.
• Typography Portfolios: Create eye-catching text animations for design portfolios or creative agency websites.
• Status Indicators: Show rotating status messages, announcements, or call-to-action phrases in a way that naturally draws user attention through the fluid motion.

How To Use It:

1. Wrap your text elements in a container element. Each text item you want to transition between goes inside as a heading element.

<section class="text-effect">
  <h1>CSSScript</h1>
  <h1>jQueryScript</h1>
</section>

2. The effect requires two keyframe animations. The fade animation controls the opacity transitions of individual text items, while the combine animation applies the blur and contrast filters that create the gooey appearance.

@keyframes fade {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes combine {
  to {
    filter: blur(10px) contrast(30);
  }
}

3. Each text element needs the fade animation with specific timing functions. The first item starts visible and fades out, while the second starts hidden and fades in.

h1 {
  animation: fade 4s linear infinite;
  animation-timing-function: linear(1 45%, 0 55% 90%, 1 100%);
}
h1:nth-child(2) {
  animation-timing-function: linear(0 45%, 1 55% 90%, 0 100%);
}

4. The container element requires a white background (the filter effect depends on this) and applies the combine animation with timing synchronized to the text transitions.

section {
  background: white;
  animation: combine 4s linear infinite;
  animation-timing-function: linear(0, 0 45%, 1 50%, 0 55% 90%, 1 95%, 0 100%);
  padding: 50px;
  display: grid;
  place-items: center;
}
section > * {
  grid-area: 1 / 1;
}

5. For three or more items, you need to recalculate timing functions. The animation duration increases proportionally (2 seconds per item).

.text-effect h1, .text-effect {
  animation-duration: 6s;
}
.text-effect h1:nth-child(1) {
  animation-timing-function: linear(1 28.33%, 0 38.33%, 0 95%, 1 100%);
}
.text-effect h1:nth-child(2) {
  animation-timing-function: linear(0 28.33%, 1 38.33%, 1 61.66%, 0 71.66%, 0 100%);
}
.text-effect h1:nth-child(3) {
  animation-timing-function: linear(0 61.66%, 1 71.66%, 1 95%, 0 100%);
}
.text-effect {
  animation-timing-function: linear(0, 0 28.33%, 1 33.33%, 0 38.33%, 0 61.66%, 1 66.66%, 0 71.66%, 0 95%, 1 100%);
}

FAQs

Q: Can I change the background color from white to something else?
A: The white background is required for the contrast filter to work properly. The filter intensifies contrast against the background color, and changing it will alter how the gooey effect appears. If you need a different background, you’ll need to experiment with different contrast values—darker backgrounds typically require higher contrast values to maintain the effect.

Q: The timing functions look complex. How do I calculate them for five or more items?
A: Each item needs roughly 10% of the animation for its transition and holds its visible state for the remaining time until the next transition. For five items at 10 seconds total duration, each item transitions at 20% intervals. Calculate the fade-in start point (item position × 20%), fade-out start (next position × 20% – 10%), and maintain visibility between these points. The container’s timing function needs keyframes at each transition midpoint where blur/contrast peak.

Q: The effect doesn’t appear in Safari or older browsers. What’s the compatibility?
A: The effect requires support for the CSS filter property and linear() timing function. The linear() function is relatively new (Chrome 113+, Firefox 112+, Safari 17+).

Q: The gooey effect looks too intense. How do I make it more subtle?
A: Reduce the blur value in the combine keyframe (try blur(5px) instead of blur(10px)) and lower the contrast multiplier (try contrast(15) instead of contrast(30)). You can also shorten the transition period by tightening the timing function ranges, which reduces how long the blur effect is visible. Test different combinations to find the right balance for your design.