CSS Text Shadow Generator
Set the offsets, blur, colour and opacity, add a glow layer if you like, and watch the sample text change. Then copy the line of CSS.
Ta treść jest po angielsku.
Sample text
Rozwiązane przykłady
A soft drop shadow
Offsets 2 and 2, blur 4, black at 0.35
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
A subtle shadow that lifts the text off the page.
An orange glow
Offsets 0 and 0, blur 6, orange, glow layer on
text-shadow: 0 0 6px rgba(255, 74, 31, 1), 0 0 18px rgba(255, 74, 31, 1);
The second layer is three times as wide.
O narzędziu CSS Text Shadow Generator
This generator builds a CSS text shadow. Set the horizontal and vertical offsets, the blur, the colour and the opacity, and the sample text above updates as you go. Then copy the line of CSS.
Setting both offsets to zero with some blur gives a glow around the letters, and the glow option adds a second, wider layer for a stronger effect. The colour is written as an rgba value so the opacity is part of the line.
Jak korzystać z narzędzia CSS Text Shadow Generator
- Set the offsets and the blur and watch the sample text.
- Choose a colour and an opacity, and add the glow layer if you want it.
- Copy the text-shadow line.
Typowe zastosowania
- Making a heading stand out from a background picture
- Adding a soft glow to a button label
- Creating a hard, retro text shadow
- Improving the contrast of light text
Najczęstsze pytania
What do the numbers mean?
The first is the horizontal offset and the second is the vertical offset, in pixels. The third is the blur radius. Positive offsets move the shadow right and down.
How do I make a glow?
Set both offsets to 0, raise the blur and choose a bright colour, or tick the glow option for a second wider layer.
How do I make the shadow harder?
Set the blur to 0 for a sharp-edged shadow.
Will it work on every browser?
The text-shadow property is supported by all current browsers.