Create CSS text shadow effects with visual editor for offset, blur, color, and layered shadow combinations.
This tool builds the CSS text-shadow declaration from visual controls: horizontal and vertical offset, blur radius, and color per layer, with multiple layers stacked into one property. A preview shows the result on sample text as you adjust the controls, and the finished declaration is emitted for copying. The surprise most people hit is layer order: the first shadow in the list is drawn on top of the rest, so a layered 3D effect needs offsets that grow from one layer to the next, and a negative vertical offset moves the shadow above the text.
A concrete input and expected output from the current implementation.
Input
Layer 1: offset X 2px, offset Y 2px, blur 0px, color rgba(0,0,0,0.3). Layer 2: offset X 4px, offset Y 4px, blur 0px, color rgba(0,0,0,0.3).
Expected output
text-shadow: 2px 2px 0 rgba(0,0,0,0.3), 4px 4px 0 rgba(0,0,0,0.3);
Each layer is emitted in the order entered, separated by commas, and the first is drawn on top of the second, so the two zero-blur shadows at 2px and 4px offsets render as the stepped edge of a 3D text effect. The declaration mirrors the controls exactly, so the preview and the pasted result match.
The first two values shift the shadow: a positive horizontal offset moves it right and a negative one left; the vertical offset does the same down or up. The third value, the blur radius, softens the edge and cannot be negative in the CSS grammar, so the smallest allowed blur is 0, which yields a hard-edged shadow - the basis of layered 3D and outline effects.
Layers are joined with commas into a single text-shadow value and painted in order, with the first layer on top. Each layer is a shifted copy of the glyph, not a gradient stop, so the earlier layer covers the later one where they overlap. The color is optional in the CSS grammar and defaults to the text color (currentColor) when omitted, and it may appear before or after the offsets.
Not with this property alone. text-shadow affects only the glyphs - the shadow follows the letters' outline. To shade the button's rectangle or a card, you need the separate box-shadow property, which has its own offsets, blur, spread, and an inset option. You can apply both properties to the same element, and the two shadows are independent.
The color is optional in the CSS grammar: when omitted, the shadow uses currentColor, meaning the text's own color, which is handy if the text color changes on hover and you want the shadow to follow. No prefix is needed - text-shadow works unprefixed in all current browsers, including Safari and Firefox.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.