CSS Text-Shadow
Generator

Tutorial

Type something cool

Type something cool

Start by typing your text in the textarea.

Type something cool
Make the text bigger
Pick a background color
Make your text stand out
Choose a fresh font
Link the shadow offsets
And slide them together
Or unlink the shadow offsets
Move X and Y separately
Blur it out
Match the text's color
...Or choose your own!
Add a new layer
Set it as you like
Highlight the active layer
Toggle the layer's visibility
Or remove it completely
Check the result live
Copy the CSS code

About this app

This tool was designed to help developers easily generate and preview text-shadow properties in real time. No data is collected, ensuring full privacy.

Built with React, Next.js, and Redux, this project focuses on performance, usability, and an intuitive UI.

Crafted by Damien Bourcheix — check out more of my work here.

Credits

Icons

IconNameSource
ArrowCounterClockwisePhosphore Icons
ArrowClockwisePhosphore Icons
ArrowElbowRightPhosphore Icons
ArrowsOutSimplePhosphore Icons
ArrowsOutLineHorizontalPhosphore Icons
ArrowsOutLineVerticalPhosphore Icons
ArrowSquareOutPhosphore Icons
BookOpenUserPhosphore Icons
CaretLeftPhosphore Icons
CaretRightPhosphore Icons
CaretUpPhosphore Icons
CheckCirclePhosphore Icons
CheckSquarePhosphore Icons
CirclePhosphore Icons
CircleDashedPhosphore Icons
CodePhosphore Icons
DotsThreePhosphore Icons
EyePhosphore Icons
EyeClosedPhosphore Icons
EyedropperPhosphore Icons
EyedropperSamplePhosphore Icons
GitCommitPhosphore Icons
GraduationCapPhosphore Icons
HighlighterPhosphore Icons
KeyboardPhosphore Icons
LinkSimplePhosphore Icons
LinkBreakPhosphore Icons
ListPhosphore Icons
ListNumbersPhosphore Icons
LockSimplePhosphore Icons
LockSimpleOpenPhosphore Icons
MoonPhosphore Icons
PaintBrushPhosphore Icons
PaintBucketPhosphore Icons
PaintRollerPhosphore Icons
PalettePhosphore Icons
PaperclipPhosphore Icons
PencilPhosphore Icons
PencilRulerPhosphore Icons
PlayPhosphore Icons
PushPinPhosphore Icons
PushPinSlashPhosphore Icons
RulerPhosphore Icons
SlidersHorizontalPhosphore Icons
SquarePhosphore Icons
StackPhosphore Icons
StackPlusPhosphore Icons
StackSimplePhosphore Icons
SunPhosphore Icons
TextAaPhosphore Icons
TextTPhosphore Icons
TrashPhosphore Icons
VectorTwoPhosphore Icons
XPhosphore Icons

Fonts

FontSource
Dancing ScriptGoogle
Playwrite GB SGoogle
AlkatraGoogle
Playwrite FR ModerneGoogle
CaveatGoogle
GlutenGoogle
InterGoogle
KarlaGoogle
Schibsted GroteskGoogle
NunitoGoogle
Roboto CondensedGoogle
MontserratGoogle
QuicksandGoogle
ExoGoogle
Noto SansGoogle
ComfortaaGoogle
ManropeGoogle
PlayfairGoogle
Noto SerifGoogle
EB GaramondGoogle
Bodoni ModaGoogle
Roboto SerifGoogle
FrauncesGoogle
FaustinaGoogle
ImbueGoogle
Poltawski NowyGoogle
Montagu SlabGoogle
Cutive MonoGoogle
Courier PrimeGoogle

Version: 1.2.0

Last update: May 2025

© Damien BOURCHEIX, 2025