Go to homepage

Projects /

January 26, 2021

Text Filling Effect

By CodyHouse
399 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:

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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