Go to homepage

Projects /

January 26, 2021

Text Filling Effect

By CodyHouse
404 HTML, CSS, JS components. Download →

How to create a text filling effect in CSS.

The -webkit-text-fill-color and -webkit-text-stroke properties can be used to modify the fill and stroke colors of your text elements. The browser support is pretty good too!

Be aware that the -webkit-text-stroke property doesn't always give pleasant results: it depends on the font-family in use.

.text-fill {
  -webkit-text-fill-color: transparent;

  /* -webkit-text-stroke: {size} {color}; */
  -webkit-text-stroke: thin PaleTurquoise; 
  -webkit-text-stroke: 0.2rem PaleTurquoise;

  /* 👇 split stroke properties */
  -webkit-text-stroke-color: PaleTurquoise;
  -webkit-text-stroke-width: 0.2rem;

Live demo:

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.