CSS Text Effects Generator
Generate text-stroke outlines, neon glow, gradient fills, 3D extrusion, long shadows and neumorphic text, with copyable CSS.
One slider, twenty-four times the work
The depth control drives every effect on this page, and it means a different number of shadow layers in each one:
| Depth | neon | neumorph | extrude | longshadow |
|---|---|---|---|---|
| 1 | 4 | 2 | 2 | 3 |
| 6 | 4 | 2 | 7 | 18 |
| 12 | 4 | 2 | 13 | 36 |
| 16 | 4 | 2 | 17 | 48 |
Neon and neumorph are fixed — four layers and two, whatever the slider says. Extrude grows one layer per step and long shadow grows three, so at the top of the range one effect is emitting 24 times as many shadows as another for the same slider position. Nothing in the control hints at it.
| Depth | Long shadow layers | Long shadow CSS | Neon CSS |
|---|---|---|---|
| 1 | 3 | 91 bytes | 101 bytes |
| 6 | 18 | 424 bytes | 104 bytes |
| 12 | 36 | 838 bytes | 105 bytes |
| 16 | 48 | 1,114 bytes | 106 bytes |
That is over a kilobyte of CSS for a single line of text, and every one of those layers is a separate shadow the browser composites on each repaint. Neon gets its glow from four layers whose radii multiply — the outermost is seven times the depth, so at maximum it reaches 112px from the letter while costing under a hundred bytes.
The extrude is one step from breaking
Extrude darkens each successive layer by multiplying the colour by 1 − 0.06 × layer. That factor runs down as the stack deepens:
| Layer | Factor | Colour | |
|---|---|---|---|
| 13 | 0.22 | #111d38 | |
| 14 | 0.16 | #0c1529 | |
| 15 | 0.10 | #080d1a | |
| 16 | 0.04 | #03050a | |
| 17 | -0.02 | #000000 | clamps to black, and stays there |
| 18 | -0.08 | #000000 | clamps to black, and stays there |
The slider stops at 16. The factor first goes negative at layer 17. One more step on the control and the effect would stop responding to it — the bottom of the extrusion would be solid black and every additional layer would add file size and nothing visible. Whether that cap was chosen for this reason or landed there by luck, it is exactly one step from the cliff.
A thing that turns out not to be wrong
The long shadow is built from integer offsets marching along a 45° diagonal — 1px 1px, 2px 2px, and so on out to 68px of real distance at maximum depth. It is tempting to assume the staircase only closes up because 45° happens to give whole numbers on both axes, and that any other angle would leave gaps between layers.
| Angle | Gaps in 18 steps |
|---|---|
| 15° | 0 |
| 30° | 0 |
| 45° | 0 |
| 60° | 0 |
| 75° | 0 |
It does not. Stepping one pixel at a time along any angle moves each rounded coordinate by at most one pixel per step, so the layers always touch — checked from 0° to 90° with no gaps anywhere. The construction is more robust than it looks, and the 45° choice is about how it looks rather than whether it works. Step three pixels at a time instead and the gaps appear immediately, which is the difference worth knowing if you ever build one of these yourself.
How to use
- Pick an effect and adjust it live.
- Test at the actual size you will use.
- Check that the text remains legible.
- Copy the CSS.
Frequently asked questions
How is a gradient text fill achieved?
By applying a background gradient to the element, clipping the background to the text, and making the text colour transparent. It is a slightly indirect technique because CSS has no direct gradient text property, and it needs a fallback colour for anywhere the clipping is unsupported.
Do these effects hurt readability?
Several do, at small sizes. Heavy strokes, strong shadows and 3D extrusion all interfere with letterforms, which matters more the smaller the type. Reserve strong effects for large display text and keep body text plain.
Is the text still selectable and searchable?
Yes — every effect here is CSS applied to real text, so it remains selectable, searchable, translatable and readable by screen readers. That is the substantial advantage over setting headline text as an image, which loses all of it.
How do I make a text outline?
Either with the webkit text stroke property, which draws inward and thins the glyph, or by layering four text shadows at diagonal offsets, which sits outside the letterform. The newer paint-order property improves the stroke behaviour where supported.
Why does my effect look different in another browser?
Because several of these techniques rely on properties with uneven support or subtly different rendering, particularly text stroke and background clipping. Testing in more than one browser is worth doing before committing a headline to one.
Should decorative text have a fallback?
Always. Anything relying on background clipping needs a plain colour declared first, so unsupported browsers show readable text rather than an invisible transparent fill. That failure mode is the one worth guarding against.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.