Text Wrap Around Image
Wrap text around any image shape with custom spacing, fonts and layout options.
Open Tool →How to make a text shadow
- Type your text and choose a font, size and colors.
- Start from a preset (soft, hard, long, neon glow, retro 3D, letterpress) or build your own from up to six shadow layers.
- Adjust each layer’s direction, blur, color and opacity. Add a long shadow for the flat-design look.
- Copy the CSS for your website, or download a PNG.
How it works
- The preview is real HTML text with the CSS shown on this page, so what you see is what the browser will do with your code.
- The PNG is drawn on a canvas with the same layers. Shadows are painted behind the text, and the first layer sits on top, just like CSS.
- Blur values use the CSS meaning (blur radius in pixels). A long shadow is a stack of one-pixel steps, so it produces many comma-separated values in the CSS.
- Bundled fonts such as Anton or Lobster must be added to your own site (they are free, open-licence fonts) before the CSS looks the same there.
Frequently asked questions
How do I write a CSS text shadow?
Use text-shadow: x y blur color;, for example text-shadow: 2px 3px 4px rgba(0,0,0,.4);. Separate several shadows with commas.
How do I make neon glow text?
Pick the Neon glow preset. It stacks several shadows with no offset and growing blur in a bright color on dark text background.
Why does my CSS look different on my site?
Usually the font. The preview uses fonts bundled with this site. On your own site, load the same font or choose a font your visitors already have.
Is it free to use the generated code?
Yes. The CSS and images you make are yours to use.