Text Decoration Styles

<p id="">Discerning designers know that simple, out-of-the-box underlines don’t always look well-considered. With native support for text underline and decoration CSS properties, Webflow now gives you precise control over text decorations in the Style panel. You can now refine text decoration positioning, choose a different decoration color from your text color, or even add a squiggly line decoration.</p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:2164px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="2164px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/674510a7c9e0d145f413ebc267450fef3907dab7fa537090text-decor-style-1.png>" loading="lazy" alt="Text decorated with a dotted, dark teal underline offset by 8px" width="auto" height="auto" id=""></div><figcaption id="">With the new text decoration styles, you can create colorful, dotted underlines</figcaption></figure><h2 id="">New text decoration styles</h2><p id="">Starting today, you’ll find new <strong id="">“Decor”</strong> settings in the <strong id="">Style panel &gt; Typography section</strong>. This update introduces advanced text decoration properties, giving you unparalleled control over underline styles and behaviors:</p><ul id=""><li id=""><strong id="">Decoration Style</strong>: choose from solid, dashed, dotted, wavy, or double lines.</li><li id=""><strong id="">Underline Offset</strong>: adjust the vertical positioning of underlines.</li><li id=""><strong id="">Decoration Thickness</strong>: customize the weight of underlines and strikethroughs.</li><li id=""><strong id="">Decoration Color</strong>: set the decoration color independently of text color.</li><li id=""><strong id="">Underline Position</strong>: fine-tune underline placement relative to your text.</li><li id=""><strong id="">Skip Ink</strong>: keep underlines clean by avoiding overlaps with letters’ ascenders and descenders.</li></ul><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:2164px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="2164px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/674510a7c9e0d145f413ebd86745104690aca856ee5f44detext-decor-style-2.png>" loading="lazy" alt="The same text but now with a thick orange-yellow double underline" width="auto" height="auto" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:2164px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="2164px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/674510a7c9e0d145f413ebca6745106390aca856ee5f5f04text-decor-style-3.png>" loading="lazy" alt="The same text but now with a thick wavy pink line running through the text" width="auto" height="auto" id=""></div><figcaption id="">Many of different aesthetics are possible with text decoration controls</figcaption></figure><p id=""><strong id="">Note: </strong>we’ve also relocated the Italicize property to the “More Type Options” area for easier access to related text styles.</p><h3 id="">Try out the new styles</h3><p id="">Head to <strong id="">Style Panel &gt; Typography &gt; Decor</strong> on your site to see the new options in action. You can also create CSS transitions to animate <strong id="">Underline offset</strong> and <strong id="">Decoration color</strong>, in the <strong id="">Style Panel &gt; Effects &gt; Transitions</strong> dropdown.</p><p id=""><a href="<https://help.webflow.com/hc/en-us/articles/35777994706835-Text-decorations-and-underlines>">Check out the Help Center</a> for step-by-step guides on using these new text decoration styles.</p><p id="">‍</p>