CSS Snippet:

Gradient Text

This CSS snippet creates a smooth multi-colour gradient across heading text, giving it a clean, modern, and design-led look.

Unlike standard solid text colours, the gradient adds depth and visual interest while still feeling polished and professional.

Difficulty:

Easy

Promotion

Need help with your Wix website?

Fix a problem, rebuild your site, or get your SEO set up properly.

Expert Wix support, exactly when you need it.

Find out more

Start Now

Live preview

Gradient Text

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 stand out without relying on heavy shadows or animation.

It works particularly well for modern websites, hero sections, and feature headings where you want a more elevated visual style.

Where to apply it

Apply this class to heading text only.

Common examples include:

• Hero headings

• Featured section titles

• Promotional banners

• Product or SaaS landing pages

This style works best on larger text where the gradient has enough room to show clearly.

Notes & Setup

Select your heading text in Wix Studio.
Add the class: gradient-text
Paste the CSS into your site's Custom CSS section.

You can replace the colours with your own brand palette, and adjust the gradient angle if you want a different direction.

Customisation

Gradient Direction:

Change the angle here:

linear-gradient(90deg, ...)

Examples:

• 90deg = left to right

• 135deg = diagonal

• 180deg = top to bottom

Colours:

Replace the gradient colours with your own brand colours for a more custom look.

Tip:

This style works best on bold heading text. On smaller text, the gradient can become less noticeable.

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

.gradient-text {
background: linear-gradient(90deg, #3B0270, #FF3F7F, #6F00FF);

-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

display: inline-block;
}