Refract

CSS text effects generator

Make headings stand out with gradient, animated, outlined, glowing or image-filled text. Pick your page builder and the CSS targets its heading, so you can paste it straight in.

Free · no sign-up · copy and paste

Controls

CSS










How to use the css text effects generator


  1. Pick an effect. Choose a gradient, an animated gradient that flows across the letters, an outline, a glow, an image fill or a long shadow.
  2. Set the colours. Choose up to three colours and the gradient angle, or the outline width, glow size or shadow length, depending on the effect.
  3. Check it at your size. Type your own words and set the preview size and weight to match your heading. Switch the background to see it on light and dark sections.
  4. Paste it into your builder. Choose your page builder from Paste into. The CSS targets that builder’s heading, and the steps show exactly where it goes.


How gradient text works
CSS can’t colour text with a gradient directly. Instead, the gradient is set as the element’s background, background-clip: text trims it to the shape of the letters, and the text colour is made transparent so the background shows through. The -webkit- versions are still needed for Safari and keep the effect working in older Chrome.
Keeping it readable
Effects suit short, large headings, not paragraphs. Check that every part of a gradient has enough contrast with the background, especially the lightest colour, and avoid glow and outline effects at small sizes where they blur the letter shapes. Screen readers read the text normally, because it’s still real text.
Effects that page builders don’t include
Most builders let you set a heading colour and a basic shadow, but not gradient, outline or image-filled text. Using the builder’s own heading with this CSS keeps your text editable and searchable, rather than turning it into an image.
Using it in WordPress, Elementor, Divi, Bricks and Breakdance
Choose your page builder from Paste into, above the code, and Refract rewrites the CSS for it. Elementor Pro and Divi 5 use the selector keyword, Bricks uses %root% and Breakdance uses %%SELECTOR%%, so the effect only applies to the element you paste it into. For the WordPress block editor, free Elementor and Divi 4, you add a CSS class to the element and paste the CSS into your site’s custom CSS. The numbered steps under the code show exactly where to click, and Refract remembers your builder for every tool.


Frequently asked questions


Why does my gradient text show as a solid block?
The text colour is probably still set by your theme or builder. The CSS uses -webkit-text-fill-color: transparent, which overrides it in most cases; if not, clear the heading’s colour setting in your builder.
Does gradient text work in all browsers?
Yes. background-clip: text works in every current browser, with the -webkit- prefix included for Safari.
Can I animate gradient text?
Yes. Choose Animated gradient and set the loop duration. The animation stops for anyone who has reduced motion turned on.
Can I use this in Elementor, Divi or Bricks?
Yes. Choose your page builder under Paste into, above the code. The CSS is rewritten for that builder, and the steps underneath tell you exactly where to paste it. WordPress’s block editor and Breakdance are supported too.