Press "Enter" to skip to content

[codepen] Gooey Text Background with SVG Filters

Gooey text backgrounds with SVG filters are smooth, sticky, and rounded corners of your text background with SVG filters.

cool css heading styles, svg typing animation, svg text animation codepen, gooey effect, css text effects, text hover effects css

How to make use of it:

1. Wrap the text in a DIV container.

<div class="goo"> Add Here </div>

2. Create a gooey effect with SVG filters.

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
      <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" 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" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
      </filter>
  </defs>
</svg>

3. CSS Styles Required.

.goo {
  font-size: 3rem;
  line-height: 1.35;
  display: inline;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background: var(--color-highlight);
  padding: 0.5rem 1rem;
  -webkit-filter: url('#goo');
          filter: url('#goo');
}
.goo:focus {
  outline: 0;
}

rounded text background using svg filters Plugin/Codepen


See Demo And Download

Official Website(ines): Click Here

This superior jQuery/javascript plugin is developed by ines. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.