CSS Snippet:
Outline Text
This CSS snippet creates a stroked outline text effect with no fill, leaving only the outer edge of the letters visible.
It gives headings a bold, graphic look that feels more editorial and design-led than standard text styling.
Difficulty:
Easy
Live preview
Outline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this text style when you want a heading to make a strong visual statement without relying on solid colour fills.
It works particularly well in oversized headings, layered layouts, or modern editorial-style designs.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Oversized hero headings
• Layered text compositions
• Editorial layouts
• Design-led landing pages
This style works best at larger sizes where the outline can be seen clearly.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: outline-text
Paste the CSS into your site's Custom CSS section.
You can change the stroke thickness and colour to suit your design.
Note: Some fonts do not work cleanly with the outline feature and continue to display inner nodes and styling.
Customisation
Stroke Thickness:
Adjust the line thickness here:
-webkit-text-stroke: 2px #111111;
Examples:
• 1px = more refined
• 2px = bold and clear
• 3px+ = more dramatic
Colour:
Replace #111111 with any colour you want for the outline.
Tip:
This style works best on large headings. On smaller text, the stroke can become harder to read.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.outline-text,
.outline-text * {
color: transparent !important;
-webkit-text-stroke: 2px #111111;
display: inline-block;
}
