Fill Text - CSS Clipping

Let the JavaScript plugin do the work for you or get into the CSS playground
P.S. It is a pure CSS effect.


<script src="jquery.js"></script>
<script src="fillText.js"></script>
       color: "black",
       text_bg: "#ccc",
       duration: "2s",

<div data-sample="Fill_Text" class="element"></div>


With default values:

color : "#ccc",
text_bg : "black",
fill_value : 7,
duration : "2s"

CSS Playground

-webkit-background-clip is a powerful css property still under experiments. I was going through various usecases when this effect struck me. It can be used as a light-weight css-only loader, a cool text effect or in my case to show skillset efficiency.
Let's start with the basic HTML structure required.

Attention: Some of the techniques we’ll be using are experimental and might not work in older browsers.

The Markup

We'll be using data-attribute to provide dynamic value of the content to the CSS selectors.

<div data-sample="Fill_Text" class="fill-text"></div>


We will be creating two layers, one containing the base color of the text and other to achieve the fill effect.
Let's give the basic styling to the text.

.fill-text {
  font-size:4.5em;        /* set accordingly */
  position:relative;      /* this is important to give scope to the ::after content */
  display:inline-block;   /* this will confine the width of the content */
  color:#ccc;             /* base text color */

Clipping the background to text

The ::before will contain the base color text layer.
attr(data-sample) will fetch the content of the data-attribute used in the HTML markup. This way, our text will stay dynamic in CSS.

.fill-text::before {

The ::after is where the top layer will reside. Set the background color to the desired fill color and -webkit-background-clip:text will clip the background to take the shape of text. The width of the background will give the value to the effect.

Note: -webkit-text-fill-color:transparent is important to clear the fill color of the text and make it transparent for the background to fill.

.fill-text::after {
  content:attr(data-sample);  /* get content from HTML */
  position:absolute;          /* to overlap the base text */
  width:60%;            /* this sets the width of the fill color */
  background:black;       /* Set the color to desired fill color */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

Now, lets give life to the effect

The animation

I hope you'll agree motion does more work than static content. For the basics, we will simply change the width of the background from 0 to 60% . However, a variety of animations can be added.

@keyframes fill {
  from {
    width: 0;
  to {

Now add the animation fill to the original ::after

.fill-text::after {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;      /* this will reverse the direction after one loop */

That's it from my side! Now its your time to make the internet awesome 😎