About

Flat text communicates content. Extruded text communicates presence. This tool renders real 3D-extruded typography onto an HTML Canvas, letting you control extrusion depth d, face color, shadow color, rotation angles θ_x and θ_y, and font parameters. The output is a production-ready transparent PNG. Unlike CSS text-shadow hacks that only fake depth with a few offset copies, this renderer draws up to 80 discrete extrusion layers with per-layer color interpolation, producing a smooth gradient from face to shadow that holds up at print resolution. The limitation: true perspective projection is not applied. The tool uses parallel (oblique) projection, which is accurate for signage and social media headers but will not match a camera lens distortion model.

Formulas

Each extrusion layer i (from 0 to d) is drawn at an offset computed by the rotation angles:

x_i = i ⋅ cos(θ_y)

y_i = i ⋅ sin(θ_x)

The color of each layer is linearly interpolated between the extrusion (shadow) color and the face color:

C_i = C_shadow + id ⋅ (C_face − C_shadow)

Where d = extrusion depth in pixels, θ_x = vertical rotation angle, θ_y = horizontal rotation angle, C_face = front face hex color, C_shadow = back extrusion hex color. Layer 0 is the deepest (drawn first), layer d is the front face (drawn last). This back-to-front painter's algorithm ensures correct occlusion without z-buffering.

Reference Data

Parameter	Range	Default	Effect
Font Size	24 - 200 px	80	Controls glyph height on canvas
Extrusion Depth	0 - 80 px	20	Number of layered copies creating 3D effect
X Rotation	−45° - 45°	0°	Vertical tilt of extrusion direction
Y Rotation	−45° - 45°	15°	Horizontal tilt of extrusion direction
Canvas Width	200 - 2000 px	800	Output image width
Canvas Height	100 - 1000 px	400	Output image height
Face Color	Any hex	#7C8CF8	Front face fill of text glyphs
Extrusion Color	Any hex	#3A3D8C	Deepest layer color; intermediate layers interpolated
Background	Transparent or any hex	Transparent	Canvas background fill
Font Family	System fonts	Arial Black	Typeface used for rendering
Letter Spacing	0 - 30 px	2	Tracking between glyphs
Outline	On/Off, 1 - 6 px	Off	Stroke around each glyph for contrast
Drop Shadow	On/Off	Off	Soft shadow beneath entire text block
Bold	On/Off	On	Font weight toggle
Italic	On/Off	Off	Font style toggle

Frequently Asked Questions

At θ_x = 0° and θ_y = 0°, all extrusion layers stack directly behind the face with zero offset. The cosine and sine of zero produce no displacement, so you see only the front face. Set at least one angle to a non-zero value (e.g., 15°) to reveal the depth.

Beyond roughly 60 - 80 px of depth, the extrusion can extend outside the canvas bounds, especially at steep rotation angles. The tool clamps depth at 80 px. For very large text (font size above 150 px), keep depth under 40 px or increase canvas dimensions.

The white you see is the HTML page behind the canvas element. The canvas itself is cleared to transparent by default. Enable the "Background Color" toggle and pick a color if you need an opaque fill. For social media headers, opaque backgrounds are recommended since some platforms render transparency as black.

The canvas renders at pixel dimensions you specify. For a 4×2 inch print at 300 DPI, set canvas to 1200×600 px and increase font size proportionally. The PNG output will be pixel-exact at those dimensions.

Canvas 2D API does not natively support letter-spacing. This tool draws each character individually, measuring glyph width via measureText() and adding the spacing offset between characters. Kerning pairs defined in the font file are partially lost in this process, so results may differ slightly from CSS-rendered text.

Yes. Oblique (parallel) projection shifts all layers by the same offset vector. True perspective would scale distant layers smaller and shift them toward a vanishing point. For typography at normal viewing distances, oblique projection is the industry standard (used in Adobe Illustrator's 3D extrude). Perspective distortion is typically undesirable for readable text.