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: