Styled Text Generator
This free online tool allows you to generate an image of your text, with the styles and the effects you want: a custom font, a solid color or a gradient, a double outline, a drop shadow, a glow, a 3D extruded effect, an emboss and a bloom.
Every parameter of every effect can be configured, and the result is downloaded as a PNG image, with a transparent background if you want, so you can use it on a logo, a thumbnail, a banner, a poster, a game or a website.
Everything runs directly in your browser: your text and your fonts are never uploaded to a server.
The checkered squares show the transparent areas of the image: they are not part of the downloaded PNG file.
How to generate a styled text image?
To turn your text into an image with the style you want, follow these simple steps:
- Type your text - Write the text in the first field. Press ENTER to write more than one line: every line is drawn one below the other.
- Choose the font - Pick one of the fonts of the list, type the name of a font installed on your computer, or upload a font file (TTF, OTF or WOFF) to use your own font. Then adjust the size, the bold and the italic styles, the line height, the letter spacing and the alignment.
- Choose the color of the text - Fill the letters with a solid color, or with a linear or a radial gradient between 2 or 3 colors.
- Add the outlines - Enable the inner outline and the outer outline to draw a double border around the letters, and choose the width and the color of each one.
- Add the effects - Enable the drop shadow, the glow, the 3D extruded effect, the emboss and the bloom, and adjust every parameter until you like the result.
- Choose the background - Keep it transparent, or fill it with a solid color or a gradient.
- Choose the size of the image - The image is resized automatically to fit the text and its effects, with the padding you want, or you can type a custom width and height.
- Download the result image - Click "Download result image" to save the result as a PNG file.
You can also click one of the buttons above the preview to apply a ready to use style, and then change any parameter you want.
Text options
| Field | Description |
|---|---|
| Your text | The text drawn on the image. Press ENTER to add a new line: every line is drawn one below the other, using the line height and the alignment you choose. |
| Font | The font family used to draw the text. The list contains the fonts that are available on almost every computer. Choose "Custom font family" to type the name of any font installed on your computer, or upload a font file to use a font that is not installed. |
| Upload a font file | Loads a TTF, OTF, WOFF or WOFF2 file from your computer and uses it to draw the text. The font file is only read by your browser: it is never uploaded to a server. |
| Font size (px) | The height of the font, in pixels. The size of the result image follows the size of the font when the image is resized automatically. |
| Bold and Italic | Draws the text with the bold or the italic style of the font. When the font does not have these styles, the browser simulates them. |
| Line height | The distance between the lines of the text, as a multiple of the font size. 1 puts the lines very close to each other, and 1.2 is the usual distance. |
| Letter spacing (px) | Adds space between the letters, in pixels. Use a negative value to bring the letters closer to each other. |
| Text alignment | Aligns the lines of the text to the left, to the center or to the right. It only changes the result when the text has more than one line, or when the image has a custom size. |
Color and outline options
| Field | Description |
|---|---|
| Fill style | How the inside of the letters is painted: with a solid color, with a linear gradient (the colors change along a straight line) or with a radial gradient (the colors change from the center of the text to its borders). |
| Gradient colors | The gradient goes from the color 1 to the color 2. Enable the third color to add one more color in the middle of the gradient, which is very useful to create metallic effects like gold or chrome. |
| Gradient angle (degrees) | The direction of the linear gradient: 0 goes from the left to the right, 90 goes from the top to the bottom, and 180 goes from the right to the left. The gradient always covers exactly the area of the text. |
| Outline 1 (inner) | The border drawn around the letters, touching the fill. Choose its width in pixels and paint it with a solid color or with a gradient. |
| Outline 2 (outer) | A second border, drawn around the first one. Enabling both outlines creates a double outline, the effect used by comics, logos, game titles and stickers. |
Effect options
| Field | Description |
|---|---|
| Shadow color and opacity | The color of the drop shadow drawn behind the text, and how visible it is, from 0% (invisible) to 100% (completely opaque). |
| Shadow blur (px) | How soft the borders of the shadow are. Use 0 to draw a hard shadow with the exact shape of the text. |
| Shadow offset X and Y (px) | Moves the shadow to the right and down. Use negative values to move it to the left and up. |
| Glow color and size | The halo of light drawn around the letters, in every direction. The size is how far the light goes, in pixels. |
| Glow intensity | How many times the glow is drawn over itself. A higher value creates a stronger and brighter halo, like a neon sign. |
| 3D depth (px) | The 3D effect draws many copies of the text behind the face, each one a little further away, which makes the letters look extruded. The depth is the distance between the face and the deepest copy. |
| 3D direction (degrees) | The direction in which the text is extruded: 0 goes to the right, 90 goes down, 45 goes to the bottom right corner. |
| 3D colors | The color of the side of the letters. Enable the second color to darken the extrusion gradually, from the face of the text to its deepest layer, which makes the 3D effect much more realistic. |
| Emboss size and strength | The emboss lights one border of the letters and darkens the opposite one, so the text looks carved or raised. The size is how far the light and the shadow spread, and the strength is how strong they are. |
| Bloom threshold, radius and intensity | The bloom isolates the pixels brighter than the threshold (from 0 to 255), blurs them with the radius you choose, and draws them again over the image multiplied by the intensity, so the light of the text bleeds over everything around it. |
| Background style | Keeps the background transparent, or fills it with a solid color, a linear gradient or a radial gradient. |
| Size of the result image | Choose Fit the text automatically to get an image exactly as big as the text and its effects, plus the padding you choose. Choose Custom size to type the exact width and height of the image, and the text is centered on it. |
Frequently Asked Questions (FAQ)
Is my text uploaded to a server?No. All the processing is done in your browser, so your text and the font files you upload never leave your computer.
How do I create a text with a double outline?Enable both "Outline 1 (inner)" and "Outline 2 (outer)". The inner outline touches the letters, and the outer outline is drawn around it, so the two borders appear side by side. Give them different colors, for example a white inner outline and a black outer outline, which is the classic look of comic titles and game logos.
How do I create a 3D text?Enable the "3D effect": the same text is drawn many times behind the face, each copy a little further in the direction you choose, which creates a flat extruded effect (also called a layered shadow). Increase the depth to make the letters look thicker, change the direction to decide where the side of the letters appears, and enable the second color to darken the extrusion gradually. If you want a real 3D text, with perspective, lights and shadows, use the 3D Text Generator.
Can I use my own font?Yes, in two ways. If the font is installed on your computer, choose "Custom font family" and type its name. If it is not installed, upload the font file (TTF, OTF, WOFF or WOFF2) and it is used immediately, only inside your browser.
Why does my text look different on another computer?When you choose a font by its name, the browser uses the font installed on the computer. The image you download is always exactly what you see here, so it never changes, but if you send the options to someone else and they do not have the same font, their text will be drawn with another font. Uploading the font file avoids this problem.
Can I download the image with a transparent background?Yes. Choose "Transparent" in the background options, and the PNG file keeps the transparency, so you can place the text over any image, video or website. The checkered squares of the preview only show where the image is transparent.
Why is part of my text cut off?It only happens when you choose a custom size that is smaller than the text and its effects. Increase the width and the height, reduce the font size, or go back to "Fit the text automatically", which always calculates an image big enough for the text, the outlines, the shadow, the glow and the 3D effect.
Why is the preview slow?The 3D effect draws the whole text once per pixel of depth, and the emboss and the bloom read every pixel of the image, so a very large font with a deep extrusion takes longer to draw. Reduce the font size, the depth of the 3D effect or the size of the image to get a faster preview.
In which format is the result image downloaded?The result image is downloaded as a PNG file, which supports transparency.
What can I use these images for?Anything you want: logos, game titles, video thumbnails, banners, posters, stickers, headers of websites, covers and presentations. To generate images of buttons with text, use the Button generator.
