YouTip

## CSS3 text-shadow Property The `text-shadow` property in CSS3 allows you to add drop shadows, glows, or multi-layered shadow effects to text elements. This property helps improve text readability against complex backgrounds and enables creative typography designs without relying on images. --- ## Browser Support The numbers in the table below indicate the first browser version that fully supports the `text-shadow` property. | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **text-shadow** | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 | --- ## Property Definition and Usage The `text-shadow` property applies one or more shadow effects to the text of an element. ### Specifications | Feature | Description | | :--- | :--- | | **Default Value:** | `none` | | **Inherited:** | Yes | | **Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.textShadow = "2px 2px #ff0000"` | --- ## Syntax ```css text-shadow: h-shadow v-shadow blur color; ``` > **Note:** You can apply multiple shadows to the same text by separating each shadow definition with a comma (e.g., `text-shadow: shadow1, shadow2, shadow3;`). ### Value Details | Value | Description | | :--- | :--- | | `h-shadow` | **Required.** The horizontal position of the shadow. Positive values move the shadow to the right, while negative values move it to the left. | | `v-shadow` | **Required.** The vertical position of the shadow. Positive values move the shadow downwards, while negative values move it upwards. | | `blur` | **Optional.** The blur radius. A higher value creates a softer, wider blur. If not specified, the default is `0` (sharp edge). | | `color` | **Optional.** The color of the shadow. If omitted, the shadow color defaults to the text color in most browsers. | --- ## Code Examples ### 1. Basic Text Shadow A simple shadow shifted 2 pixels to the right and 2 pixels down with a red color. ```css h1 { text-shadow: 2px 2px #ff0000; } ``` ### 2. Text Shadow with Blur Effect Adding a third length value introduces a blur radius to soften the shadow edges. ```css h1 { text-shadow: 2px 2px 8px #ff0000; } ``` ### 3. White Text with Dark Shadow This technique is highly effective for making white text readable on light or busy backgrounds. ```css h1 { color: white; text-shadow: 2px 2px 4px #000000; } ``` ### 4. Neon Glow Effect By setting the horizontal and vertical offsets to `0` and applying a large blur radius, you can create a glowing neon effect. ```css h1 { color: white; text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de; } ``` ### 5. Multiple Shadows (3D Text Effect) You can stack multiple shadows separated by commas to create complex 3D text effects. ```css h1 { color: #ffffff; text-shadow: 1px 1px 0px #cccccc, 2px 2px 0px #c9c9c9, 3px 3px 0px #bbbbbb, 4px 4px 0px #b9b9b9, 5px 5px 0px #aaaaaa, 6px 6px 1px rgba(0,0,0,0.1), 0px 0px 5px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.3), 3px 3px 5px rgba(0,0,0,0.2), 5px 5px 10px rgba(0,0,0,0.25); } ``` --- ## Considerations & Best Practices 1. **Readability:** Always ensure there is sufficient contrast between the text color, the shadow color, and the background. 2. **Performance:** Applying complex, multi-layered text shadows with large blur radii on long paragraphs can impact page rendering performance, especially on mobile devices. Limit heavy shadow effects to headings and short text elements. 3. **Color Formats:** Use semi-transparent colors like `rgba()` or `hsla()` for shadows to make them look more natural and blend seamlessly with different backgrounds.