Design text shadows with multiple layers, blur, and color controls plus CSS output.
Adjust horizontal and vertical offset values for the text shadow.
Set the blur radius and pick the shadow color.
See the text shadow applied to sample text in real time.
Click copy to grab the text-shadow CSS property.
Text-shadow layers are built from a horizontal offset, vertical offset, blur radius, and color. The generator combines those settings into a comma-separated CSS value, with one item for each layer. Adding layers can produce outlines, raised lettering, or separate highlights and shadows. The ordering is easy to misread: CSS paints the first listed shadow on top of later shadows, so reversing the list can visibly change overlaps.
A concrete input and expected output from the current implementation.
Input
Layer 1: horizontal 2px, vertical 3px, blur 4px, color #000000 Layer 2: horizontal -1px, vertical 0px, blur 0px, color #ff0000
Expected output
text-shadow: 2px 3px 4px #000000, -1px 0px 0px #ff0000;
Each comma-separated item defines one shadow. The first is offset 2px right and 3px down with a 4px blur; the second is offset 1px left and has no vertical offset or blur.
Every layer contributes two offsets. A positive horizontal offset moves the shadow right, while a negative value moves it left. A positive vertical offset moves it down, while a negative value moves it up. The blur radius must be non-negative: zero gives the shadow a hard edge, and larger values produce a softer shadow.
The generator writes the layers into one text-shadow declaration separated by commas. Shadows are painted front to back, meaning the first layer overlays later layers where they intersect. Multiple effects therefore belong in one property value. Separate text-shadow declarations in the same CSS rule would normally result in only the last declaration taking effect.
Only approximately. Several zero-blur shadows positioned around the glyphs can imitate a narrow outline, and the generator can assemble those layers. It is not a continuous stroke, so diagonal gaps or uneven corners may become visible at larger widths. Use a stroke-specific technique when the outline must be geometrically consistent.
No. Text shadows are visual effects and do not enlarge the line box or push neighboring content away. Large offsets and blur radii can consequently overlap nearby content or be clipped by an ancestor. Spacing and overflow behavior must be handled separately in the surrounding layout.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.