Create CSS text shadows with multiple options based on color (including Tailwind), direction, distance, and other options. The result is a CSS value that can be copied and used anywhere on the web.
Text Color
Shadow Color
Background Color
Font Size
Horizontal Shift
Vertical Shift
Blur Radius
Opacity
TEXT
CSS
text-shadow: 5px 5px 5px rgba(64,64,64,0.9);
General Help
Click on the button to share this tool with others.
Text Shadow Help
Text input box
Enter the text that you want to see in the test box below.
Colored boxes
The three cards at the top showing the colors for ‘Text Color’, ‘Shadow Color’, and ‘Background Color’ each have a color button with the current hex value for each display.
If you click each of these buttons you will be presented with a dialog where you can adjust these colors respectfully.
Sliders
Use the sliders and numerical input boxes to adjust the values for the position, shape and opacity of the shadow:
Font Size - changes the size of the text.
Horizontal Shift - moves the shadow to the left / right in relation to the subject.
Vertical Shift - moves the shadow to the up / down in relation to the subject.
Blur Radius - increases / decrease the radius of the blurriness of the shadow.
Opacity - increases / decrease opacity of the shadow against the background.
Result
When you are happy with the final result, you can click the buttons to copy the calculated CSS to the clipboard.
