Knockout Text Effect

This tutorial explains how to enliven your Gridbox sites by adding a knockout text effect using CSS code...


Code editor

Estimated time

5 min.

Adding Class Suffix

1. The class suffix knockout-text should be placed in the "Class Suffix" field of the Text, Headline, Counter or Countdown plugin.

Adding CSS

2. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.


.knockout-text .ba-counter >span,
.knockout-text .ba-countdown > span > span:first-child,
.knockout-text .content-text *,
.knockout-text .headline-wrapper > * {
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 background-image: url(/images/picture.jpg) !important;
 transform: translate3d(0, 0, 0);

/images/picture.jpg replace with your image URL.

Something is not clear? Ask a question on community forums.