CSS teksto šešėlio generatorius

Design CSS text shadows with a live preview

This CSS text-shadow generator lets you design depth, glow and outline effects visually and copy clean, production-ready CSS. Click straight onto the large preview to type your own words, drag the offset, blur and opacity sliders, pick a color, and watch the text-shadow update in real time on the text you actually care about.

Change the font family, size and weight, set the text color, and switch the background between light, grey, dark and a checkerboard to see exactly how your shadow reads on different surfaces — essential for getting neon and glow text effects right, since they only look correct on a dark background.

The text-shadow syntax, explained

A single CSS shadow is written as text-shadow: offset-x offset-y blur-radius color. The offset-x and offset-y values move the shadow horizontally and vertically (negative numbers throw it up or to the left), the blur-radius softens the edge (0 keeps it crisp), and the color sets the tone — usually a semi-transparent black for subtle depth or a bright hue for a glow.

A classic, readable shadow is text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). Set both offsets to 0 and raise the blur for a soft halo around the text. With a bright color (say #00eaff) and multiple increasing blur values, you get a neon glow. The syntax is the same either way — it's the values that change the character of the effect.

Stack multiple shadows: neon, 3D, outline and long-shadow

The real power of text-shadow is layering. You can list multiple text shadows in one declaration by separating them with commas, and the browser paints each in turn. Stacking several same-colored shadows with rising blur creates a neon / glow text effect; stepping offsets down-and-right in darkening shades builds 3D extruded text; repeating a flat offset for ten or more layers makes a long shadow; and four to eight hard offsets around the glyphs produce outlined text.

Use the preset gallery — Soft, Neon, Glow, 3D, Long shadow, Outline, Retro, Fire and Letterpress — as a starting point. Each preset loads the full layer stack (and sets a matching background) so you can then add, remove, reorder or toggle individual layers to fine-tune the look.

Copy CSS, Tailwind, or React Native

Export the result the way your project needs it. Copy CSS gives you a standard text-shadow declaration; Copy Tailwind outputs an arbitrary-property class like [text-shadow:2px_2px_4px_#00000066] that works alongside Tailwind v4's native text-shadow-* utilities; and Copy React Native converts the first layer to textShadowColor, textShadowOffset and textShadowRadius for use in a mobile StyleSheet.

Good news on browser support: text-shadow is fully standardized and needs no -webkit- or -moz- prefixes in any current browser, so the copied CSS works everywhere out of the box.

How this compares to CSSmatic, css.generator.cool and other tools

Most CSS text-shadow tools online handle a single shadow layer. CSSmatic's text shadow section gives you one set of sliders — useful for a basic drop shadow, but you can't stack layers for neon or 3D effects without writing the extra declarations yourself. css.generator.cool and similar sites offer similar single-layer controls with no preset effects and no live preview on editable text.

W3Schools has a helpful try-it editor for learning the text-shadow syntax, but it's for education — there's no one-click copy or export. Codepen is great for experimenting but requires a free account to save work. UtiloKit combines multi-layer stacking, nine presets that load a full shadow stack with a single click, editable live preview text, one-click copy in three formats (CSS, Tailwind, React Native), and a shareable URL — with no sign-up and no file uploaded anywhere.

text-shadow vs box-shadow

It's a common point of confusion: text-shadow follows the outline of the letters, while box-shadow follows the rectangular box of an element. text-shadow also has no spread radius and no inset keyword — so, unlike box-shadow, a text shadow cannot be inset. Reach for text-shadow on headings, logos and labels, and box-shadow on cards and buttons.

If you're trying to create an inset or stamped look on text, the trick is a light shadow placed just below dark text (see the Letterpress preset), not an actual inset — CSS doesn't support that for text. And for thick text outlines, the -webkit-text-stroke property is cleaner than stacking eight directional shadows.

Tips for readable shadows — and privacy

Shadows are a styling touch, not a substitute for contrast. For body text over photos, a single low-opacity shadow such as 0 1px 3px rgba(0, 0, 0, 0.5) improves legibility without distraction. Keep heavy neon and 3D effects for large display headings, and always confirm the underlying text-to-background contrast still meets WCAG so the content stays readable for everyone.

There's nothing to install and no account to create. Every preview and every line of generated CSS is produced locally in your browser, so the text you type never leaves your device. Bookmark this CSS text-shadow generator and use the Share link button to save a shadow's exact settings in the URL and send them to a teammate.

Understanding the four text-shadow values in depth

The text-shadow declaration accepts four values per shadow layer: offset-x, offset-y, blur-radius, and color. The offset values move the shadow relative to the text — a positive offset-x pushes the shadow to the right, while a negative offset-x pulls it left, simulating a light source positioned to the right. Likewise, a negative offset-y moves the shadow upward, which is natural when you want to imply a light source coming from below. Negative offsets are just as valid as positive ones and are used extensively in retro and artistic typography.

The blur-radius controls edge softness. At 0 the browser renders the shadow as a sharp, hard copy of the glyph shapes — useful for retro pixel aesthetics or crisp outline effects. Increase the value and the browser applies a Gaussian blur to the shadow mask, spreading and softening it. A radius of 4–8px is the sweet spot for a natural-looking drop shadow; values of 20px and beyond push toward a halo or glow. The blur-radius may be omitted, in which case it defaults to 0.

For the color value, rgba() is strongly preferred over hex because it gives you independent control over opacity. A shadow written as rgba(0, 0, 0, 0.3) is a soft, semi-transparent dark shadow that layers naturally over any background color. Without an explicit color the browser falls back to the element's currentColor — which can produce unexpected results when you inherit a colored text style. When stacking multiple shadows for a neon effect, setting all layers to the same rgba hue with different blur radii concentrates the glow cleanly at the center and diffuses it outward, which is exactly how real neon tube light behaves.

Text-shadow for legibility over images and complex backgrounds

One of the most practical applications of text-shadow is maintaining text legibility over photography. When a heading or caption sits over a full-bleed image, the text can clash with light patches or busy textures in the photo, making it difficult to read. The conventional solution — a semi-transparent dark overlay across the whole image — reduces the photo's visual impact and can feel heavy-handed. A well-tuned text-shadow is a lighter alternative: it follows only the glyphs, leaving the surrounding image untouched while creating just enough local contrast for comfortable reading.

The WCAG 1.4.3 Success Criterion (Contrast Minimum) requires a contrast ratio of at least 4.5:1 for body text and 3:1 for large text against the background. Critically, the WCAG contrast algorithm does not account for text-shadow — it measures the color of the text against the color of the pixels directly behind the text. This means a shadow can help perceptually but cannot substitute for a passing contrast ratio in the underlying colors. The correct workflow is to ensure the text color achieves the required ratio against the most challenging part of the background, and then use a subtle shadow as an additional safety layer rather than as the primary legibility strategy.

For white text over a photographic hero image, text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) is a reliable starting point. The zero horizontal offset keeps the shadow centred under the text so it reads more as a subtle glow than a directional drop shadow, which looks cleaner at display sizes. Increase the blur and reduce the opacity on very large headings; reduce the blur and increase the opacity on small captions where every pixel of contrast counts.

Design techniques: hard drop, soft drop, glow, outline, and letterpress

Different text-shadow configurations produce recognisably distinct visual styles. A hard drop shadow sets the blur-radius to 0 with a small offset — e.g. text-shadow: 2px 2px 0 #222. The result is a crisp, geometric shadow that was ubiquitous in web design circa 2005 and is now deliberately used for retro, vintage, or pixel-art aesthetics. A soft drop shadow keeps a similar offset but raises the blur to 8–20px, producing a diffused, modern shadow that integrates naturally with most contemporary design systems.

A text glow sets both offsets to 0 and uses a large blur with a vivid color: text-shadow: 0 0 20px rgba(255, 100, 0, 0.8). Stacking two or three of these at different blur radii deepens the glow and makes it look less flat. An outline or stroke effect places four hard shadows in the cardinal directions — 1px 0, -1px 0, 0 1px, 0 -1px in a contrasting color — which draws a thin border around the glyphs without requiring the non-standard -webkit-text-stroke property. Eight directions (adding the diagonals) produces a cleaner, more even outline.

The letterpress effect is a single shadow offset slightly downward in a lighter color than the text: for example, text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) on dark text against a dark background. This creates the illusion that the text is pressed into the surface, catching light on its lower edge — a technique borrowed from traditional print typography. It works because the human visual system interprets a lighter edge below as a concave surface lit from above, the same perceptual shortcut that makes embossed metal or debossed leather legible.

Performance, rendering, and the history of drop shadows in design

Text-shadow is resolved at paint time in the browser's rendering pipeline — the same stage as background images and gradients — not at composite time like transform or opacity. This means the GPU cannot offload shadow painting on its own; it requires the CPU to rasterize the blurred glyph mask. Applying large-blur text-shadows to dozens of elements, or animating text with a shadow, can trigger excessive repaints and cause frame drops on mid-range devices. To inspect the cost, open Chrome DevTools → Rendering tab → enable Paint Flashing: any element that repaints each frame lights up green. If animated text must have a shadow effect, consider using filter: drop-shadow() instead — CSS filters can be promoted to their own compositor layer with will-change: filter, shifting the work to the GPU.

The story of drop shadows in interface design tracks the broader history of skeuomorphism and flat design. The skeuomorphic era — typified by iOS 6 and the web design of 2008–2012 — leaned heavily on drop shadows, gradients, and embossing to make on-screen elements feel physical and tangible. Every button, icon, and heading cast a shadow because the design philosophy was that digital UI should mimic real-world materials. Apple's pivot to iOS 7 in 2013, led by Jony Ive, removed virtually all shadows and textures overnight, triggering the flat design era in which even subtle text-shadows were considered excessive.

The pendulum swung back with Material Design (Google, 2014), which rehabilitated shadows as a semantic signal of elevation: elements higher in the z-axis stack cast larger shadows, communicating hierarchy to the user rather than just decorating the surface. This distinction — shadow as information, not ornament — remains the guiding principle in contemporary design systems. The instinct behind it traces to perceptual psychology: the human visual system has been calibrated by evolution to read downward-right shadows as natural, because the dominant outdoor light source (the sun) is overhead and slightly to the left for observers in the Northern Hemisphere. A shadow that falls down and to the right reads as lit from above-left, which is the most unconsciously comfortable orientation — making it the safe default for text-shadow offsets in nearly every design context.