Style rich text in Webflow without site-wide changes

Webflow styles the elements inside a rich text through nested selectors. That means the heading inside .rich-text rather than every heading on the site. Setting those up by hand means clicking into each element type in turn and repeating the work for every rich text you build.

The Rich Text Styler does it in one pass. You set the type, spacing and colour for every element a rich text can contain, then paste the whole set into Designer, where it arrives as normal editable classes you can keep adjusting.

You'll need a Webflow project open in Designer. You don't need any code, because the tool opens with a complete set of styles already filled in, so you can paste it straight away and adjust afterwards.

The field at the top of the left panel is the class your styles attach to. It starts as rich-text, which matches Webflow's own default.

Give it a different name when a project needs more than one look, such as article-body for blog posts, guide-content for documentation or legal-copy for terms pages. Each name carries its own styles and they never interfere with one another, so one project can hold as many as you need.

Names are tidied to Webflow's rules when you click away: capitals become lowercase and spaces become hyphens, so "Article Body" becomes article-body.

The left panel lists every element a rich text can hold, from headings and paragraphs through to lists, quotes, images and captions. The number beside each one tells you how many properties it currently sets.

Select an element and the right panel shows its style settings, grouped into sections such as typography and spacing. Values already in place are highlighted; empty fields are properties you can still set. Units sit inside each field as a dropdown, so you can switch between pixels and rem without retyping, and the arrow keys nudge a value up or down.

If a property you want isn't listed, select Add at the bottom of the panel, type its name, and it joins the set. Shorthand properties are expanded automatically, so typing margin gives you the four separate sides Webflow stores.

The centre shows a live preview of your type scale. Select any sample in it to jump straight to that element's settings.

Switch the centre panel to Code and you get an editable stylesheet. Paste CSS into it and the panels fill in to match; adjust the panels and the CSS updates in turn, so the two always agree.

You can paste an entire stylesheet. Anything that isn't a rich text rule is ignored, so there's no need to clean it up first. Set your class name before pasting, because only rules matching that name are read. That is useful when a stylesheet contains several rich texts.

Variables are resolved to real values as they come in, so a colour stored as a variable arrives as the colour itself. This matters because a variable name means nothing in a project that doesn't define it; your paste has to carry values that work on their own.

Select Copy, then paste directly onto the Designer canvas.

You get a rich text block carrying your class, with a short paragraph inside confirming the styles are live. Add headings, lists, quotes or images inside that block and they pick up your styles automatically, with nothing further to assign. Replace the paragraph with your own content, or delete the block entirely and apply the class to a rich text you already have.

Copying needs Chrome, Edge or Firefox. Safari's clipboard rejects the format Webflow requires, and the tool tells you rather than failing quietly.

Delete the class in Designer and every nested style goes with it, cleanly.

That reversibility is deliberate. Styles attached to a rich text class can always be removed, which is why the tool works this way rather than changing your project's site-wide typography.

Pasting more than once is safe. Each paste creates or updates its own class, so pasting the same name twice gives you two rich text blocks sharing one set of styles, so delete the spare block. To restyle, change your values and paste again under the same name.

The tool needs about 760px of width to work, because it places your elements, preview and style settings side by side. On a phone it shows a note rather than a cramped layout.

Styles apply to every breakpoint at once. Setting a different type scale for tablet or mobile isn't yet supported, so those adjustments happen in Designer after pasting.

There's no file upload. Paste your CSS into the Code panel instead, which reaches the same result in fewer steps.

Site-wide typography, meaning the settings that apply to every heading across a project, is outside what this tool does. It styles what lives inside a rich text, and nothing beyond it.