Text shadows add depth and emphasis to headings and hero text. By offsetting a blurred copy of the text behind the original, you create a raised, floating effect that improves readability on busy backgrounds.
Adjust horizontal and vertical offsets, blur radius, shadow color, opacity, text color, and font size. The Canvas preview renders exactly what the browser will show, and the CSS output is ready to paste into your stylesheet.
Frequently Asked Questions
Q: What is the difference between text-shadow and box-shadow?
What is the difference between text-shadow and box-shadow? text-shadow applies to the glyphs of text, box-shadow applies to the rectangular box of an element. text-shadow does not support a spread parameter.
Q: Can I add multiple text shadows?
Can I add multiple text shadows? Yes. Separate each shadow with a comma in the same declaration, e.g. text-shadow: 2px 2px 4px rgba(0,0,0,.5), 6px 6px 12px rgba(0,0,0,.25);
Q: Why does my text shadow look blurry?
Why does my text shadow look blurry? Check the blur value — anything above 20px becomes very diffuse. Also ensure the shadow color has sufficient contrast against the background.
Q: Does text-shadow affect performance?
Does text-shadow affect performance? Minimal. A handful of text-shadows has negligible impact, even on mobile devices.
Q: Can I use text-shadow for a neon glow effect?
Can I use text-shadow for a neon glow effect? Yes. Set offset to 0 0, use a bright color at full opacity, and increase blur to 15-30px. Stack multiple colors for a stronger glow.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.