Build text shadow effects visually. Add multiple layers, pick colors, adjust blur and offset — all with a live preview. Copy the CSS output in one click.
The CSS text-shadow property accepts one or more shadow definitions separated by commas. Each shadow definition consists of four values: horizontal offset (X), vertical offset (Y), blur radius, and color. Only the X and Y offset values are required — blur defaults to 0 if omitted, producing a hard-edged shadow. A positive X offset moves the shadow to the right, a negative value moves it left. A positive Y offset moves it down, a negative value moves it up.
Stacking multiple shadows, separated by commas, is how advanced effects like neon glows, 3D depth illusions, and retro outlines are built. The shadows are rendered back-to-front: the first shadow in the list appears on top of those that follow. Neon effects use several shadows with the same position but increasing blur radii and decreasing opacity to simulate the halo of light around a glowing sign. The 3D depth effect uses a sequence of slightly offset hard shadows (no blur) in progressively darkening shades to simulate extruded type. This stacking capability makes text-shadow one of the most expressive CSS properties for typography.
text-shadow: h-offset v-offset blur color;text-shadow: 3px 3px 0 #000; — omit blur or set to 0text-shadow: 0 0 10px rgba(99,102,241,0.8); — zero offsets with blur onlytext-shadow: 2px 2px 4px #000, 0 0 12px blue; — comma-separated listtext-shadow: none;text-shadow does not support a spread value — that is only available in box-shadow.