Perspective Text Generator
Create text with a 3D perspective effect, as if the letters are receding toward a vanishing point. Adjust the focal length, depth, tilt, and font. The canvas is interactive: click anywhere on it to reposition the vanishing point. Each character is scaled using the perspective projection formula s = f / (f + z). Download the result as PNG or copy the equivalent CSS transform for use on a website.
PERSPECTIVE, focal length 400, max depth 300, vanishing point at left center → characters shrink toward the left following s(t) = 400 / (400 + 300t).
x(t) = xflat + (vpx − xflat) × (1 − s(t))
y(t) = ybase + tilt × t
Frequently Asked Questions
What is perspective text?
Perspective text is text rendered with a 3D perspective projection so letters appear to recede into the distance toward a vanishing point. Each character is scaled and repositioned according to the formula s = f / (f + z), where z increases with distance from the viewer and f is the focal length. The result looks like text written on a road or floor stretching away from you.
What is a vanishing point in text perspective?
A vanishing point is the single point where parallel lines in a 3D scene appear to converge. In perspective text, all characters shrink as they approach the vanishing point. You can click anywhere on the canvas to reposition the vanishing point, or choose a preset direction from the dropdown.
How is perspective text generated mathematically?
Each character at normalized position t (0 = near side, 1 = far side) gets depth z = t x max_depth. The scale factor is s(t) = f / (f + z). The character x-position is pulled toward the vanishing point by the factor (1 - s(t)), so far characters converge toward that point. A tilt parameter adds a vertical offset proportional to t for diagonal effects.
Can I use perspective text on social media?
Yes. Download the result as a PNG image and upload it to Instagram, Twitter, Facebook, or any platform that accepts images. The perspective effect is baked into the raster image, so it displays correctly everywhere regardless of font support.
What is the CSS perspective property?
The CSS perspective property sets the distance between the viewer and the z=0 plane in 3D CSS transforms. A smaller value (e.g., 200px) creates a more dramatic distortion; a larger value (e.g., 1000px) creates a subtle effect. This tool also generates a CSS transform snippet so you can apply a similar effect to HTML elements on your own website.
What formats does perspective text export to?
This tool renders the distorted text to an HTML5 canvas element and exports it as a PNG image. PNG supports transparent backgrounds so the exported image can be placed over any color in design software like Photoshop, Canva, or Figma without white edges. The canvas resolution matches the displayed size — scale the font size up before exporting for higher-resolution output.
Can I animate perspective text on a website?
Yes. The CSS snippet this tool generates uses transform: perspective() rotateX() rotateY(), which is animatable with CSS transitions or keyframe animations. Add transition: transform 0.4s ease to the element to animate on hover, or use @keyframes to create a looping perspective-shift effect. GPU compositing makes this smooth on modern devices.
What is the difference between skew and perspective distortion?
Skew (CSS skewX/skewY) shears the element along one axis, moving parallel edges apart at an angle. Perspective distortion simulates depth by shrinking one edge while keeping the other full-size, as if the element is tilting away from the viewer in 3D space. Perspective looks three-dimensional while skew looks like a parallelogram — both are useful but for different design goals.
Focal Length
Focal length (f) controls how strong the perspective looks. A value of 100-200px gives a dramatic, almost fisheye effect. Values above 800px give a very gentle taper. In photography, this corresponds to the lens focal length: wide angles have low focal length and strong distortion.
Max Depth
Max depth sets the z-distance of the farthest character from the viewer. Higher depth means the far end of the text is much smaller. The ratio (focal + max_depth) / focal determines the maximum size difference between the nearest and farthest character.
Tilt Y
The tilt parameter shifts characters vertically as they approach the vanishing point. A positive tilt rises toward the VP; a negative tilt descends. This simulates text written on a surface that is both receding and angled, like a road sign seen from below.
Transparent Background
Enable transparent background to export a PNG where only the text pixels are opaque and the rest is transparent. This lets you layer the perspective text over any background in image editing software or on a web page.
How It Works
The tool renders your text to an HTML5 canvas element and applies a 2D transform matrix that simulates a 3D perspective tilt. The horizontal and vertical angle sliders control the degree of rotation. The canvas API's setTransform() method applies a custom affine transformation matrix calculated from the angle values, compressing one edge of the text while leaving the opposite edge full-size — the visual signature of perspective projection.
Vanishing Point Geometry
Perspective projection works by mapping 3D coordinates to a 2D plane using a vanishing point — the location where parallel lines appear to converge as they recede into the distance. In a one-point perspective (horizontal tilt only) there is a single vanishing point on the horizon line. In two-point perspective (both horizontal and vertical tilt) there are two. This tool approximates one-point perspective in real time using the canvas transform matrix.
Design Applications
Perspective text appears in movie poster typography, album cover art, logo treatments, merchandise designs, and street art. In the digital age it is used heavily in YouTube thumbnail text, social media graphics, and gaming UI to give a three-dimensional energy to otherwise flat layouts. The effect works best with bold, high-contrast fonts at moderate perspective angles — extreme angles make text illegible very quickly.
When to Use This
Use perspective text to create dynamic YouTube thumbnails or social media headers, to add depth to a logo concept, to design a title treatment for a retro or sci-fi themed project, to generate a perspective-distorted PNG for compositing in Photoshop or Canva, or to get the CSS transform values needed to apply the same effect to a live HTML element on a website.
More Free Tools
Upside Down Text Generator
Flip text and emojis upside down using Unicode character substitution with a full code point breakdown.
Korean Font Generator
Convert English text to Korean-style Unicode: angular UCAS lookalikes, phonetic Hangul, or fullwidth aesthetic.
Bar Name Generator
Generate creative pub, bar, and tavern names by style: dive bar, speakeasy, cocktail lounge, tiki bar, and more.
Campaign Name Generator
Build UTM-safe marketing campaign names with validation, UTM parameter strings, and a full URL builder.