Repository navigation
Add a text gradient block support #30982
Description
What problem does this address?
Paragraph blocks do not have a gradient color option.
This feature was requested during user testing.
EDIT: This was done for backgrounds in #43119 but there is also a suggestion that we should be able to add graidents for text!
What is your proposed solution?
Enable support for gradient controls for the paragraph block.
Disclaimer
I am not personally invested in this 🖌️ 🌈 🙈 🎨 , but I have been asked to open issues that came up during a contributor day.
Activity
mtias commentedon Apr 20, 2021
Was this request for background gradient or for gradient mask on the text itself?
carolinan commentedon Apr 20, 2021
It was not specified so I assumed they meant background. Asking for clarification.
But gradient headings could be nice...
https://codepen.io/leocampos/pen/pPwwNR
https://codepen.io/saclark/pen/EepFx
mtias commentedon Apr 20, 2021
Yes! Those would be neat to support
luminuu commentedon Sep 10, 2021
I'd love to see the ability to put gradients on paragraphs and headlines too! Maybe a background gradient would be nice too but I'd prefer text gradient over background gradient.
[-]Add gradient support to the paragraph block[/-][+]Add gradient support to the paragraph TEXT[/+]scruffian commentedon Aug 11, 2022
Reopening so we don't forget about the text aspect of this.
phil-sola commentedon Sep 23, 2022
I would love to see some cool text gradients make their way into blocks. A powerful header/paragraph gradient would be very nice!
jnz31 commentedon Dec 7, 2022
+1
7 remaining items
andrewserong commentedon Nov 30, 2025
Thanks Matías — if we lift that as a requirement I think that unblocks digging into a WIP to explore this feature, good idea 👍
andrewserong commentedon Dec 1, 2025
Just capturing a thought from this morning so I don't forget: something to try for this one could be to dynically inject a
spanaround the text content when gradient text is enabled, and apply the rules to thatspan, as that could allow block-level backgrounds and text gradient to co-exist.mtias commentedon Dec 2, 2025
It'd be nice to not affect the markup, though.
andrewserong commentedon Dec 2, 2025
Gotcha, in that case making gradient text and backgrounds mutually exclusive at the block level could be a good first step (that could then be enhanced further down the track once the background stuff is untangled)
mtias commentedon Dec 3, 2025
Yes, I think that'd be a solid path to get it started.
[-]Add gradient support to the paragraph TEXT[/-][+]Add gradient support to text color options[/+][-]Add gradient support to text color options[/-][+]Add a text gradient block support[/+]jasmussen commentedon Aug 12, 2026
Now that we have a dedicated Background panel, and a "Color" item in the Typography panel, can we do this as far as the UI side?
That is, add a "Gradient" item to below the Color item in Typography? CC: @ramonjd @andrewserong @aaronrobertshaw
ramonjd commentedon Aug 12, 2026
That's the way I'd picture it. @aaronrobertshaw is the authority here, and he had a PR in the works.
The gradient control in that PR was in the color overlay:
He will be away for a bit however, so maybe when he gets back he provide us his advice.
I can say however that text gradient is on the list of post 7.1 block support follow ups
jasmussen commentedon Aug 13, 2026
No rush on this, just excited. I'd keep the gradient inline in the panel, though, keep the labels the same, and have individual flyouts for each item, just to keep the behavior the same as it is in the Background panel.
aaronrobertshaw commentedon Sep 11, 2026
Picked this back up this week.
There are two PRs up for review now rebased on the latest trunk.
background.backgroundClipsupport, no UI.@jasmussen the gradient sits below Color in the Typography panel with its own flyout, as you suggested. It is an optional item rather than shown by default, which is the one place it differs from your sketch. Worth a look on the PR if you think it should be visible from the start.
@jameskoster text color is now disabled with a tooltip while a gradient is applied, and the clip control is a select with a preview per option rather than the tile grid you found hard to read.
Heading and Paragraph opt in. The clip control itself stays hidden unless a theme sets
settings.background.backgroundClip, so the text gradient ships without exposing the rougher box clipping UI.#76171 is closed, superseded by the two above.
aaronrobertshaw commentedon Oct 13, 2026
Text gradients are now available.
#77141 added the
background.backgroundClipsupport and #77142 added the controls.1-text-gradient.mp4
How to use it
On a Heading or Paragraph, add Gradient from the Typography panel menu and pick one. The text fills with it, in the editor and on the front end.
It also works in Global Styles and under Responsive styles.
What changed since my last update
Nothing is disabled anymore. My last comment said text color would be disabled while a gradient was applied. Instead, every control stays usable and a short notice explains what happens:
The Clip control still only shows when a theme sets
settings.background.backgroundClip.Closing this one. Please open a new issue for anything that turns up.