Animated Fill Text Effect

This widget creates a stunning visual effect of text being “filled” by a white band animation that gradually reveals the letters, keeping a clear border visible all around the letters.

Features:

• Subtle white border around the letters with -webkit-text-stroke.
• Animated fill with configurable linear gradient.
• Compatible with title widgets (e.g. Elementor).
• Support for backdrop-filter for background blur.

How to Use the Effect

1. Add a title widget in your constructor (e.g. Elementor).
2. Enter the same text that will be used in the animation (e.g. “Sed eiusmod sed vivamus consectetur”).
3. Insert CSS code into the panel Custom CSS of the widget or theme.
4. Replace selector by the actual selector of your title, as .elementor-heading-title or #my-title.
5. Set the text inside the content and adjust the border, fill and background colors as per your need.
6. If there are conflicts with the color of the original text, try remove default color from the widget in the settings.