The editor above is set to 3D. Enter your words and watch them turn on a turntable with a beveled edge.
How to use it in 3 steps
Type a short, bold line
Chunky letters carry depth. Two or three words work best.
Choose font, face color, and side color
Set a front color and a darker side color so the thickness reads. Heavy fonts such as Anton and Bungee show the bevel best.
Preview the turn, then export video
Check that the loop returns to the start without a jump. For smooth shading, export MP4 or WebM.
Three tuning tips
Make the orbit a whole loop
A full turn is 360 degrees. In 72 frames, that is 5 degrees per frame. Spinning a partial turn leaves a visible jump at the restart. A gentle sway of 20 to 30 degrees each way is easier to read and also loops cleanly.
Bevel must scale with the font
A bevel wide enough to look good on a 300 px font fills in the counters on an 80 px font. At small sizes, use a thinner edge or a heavier typeface.
Prefer MP4 or WebM for gradients
A shaded 3D surface uses a smooth gradient across many shades. GIF has only 256 colors per frame, so the shading turns into stripes. MP4 and WebM keep the gradient smooth.
Frame math for a turntable loop
A 3-second loop at 24 fps is N = round(3 × 24) = 72 frames. A full 360-degree turn divides into 360 / 72 = 5 degrees per frame. At 15 fps the same loop has 45 frames at 8 degrees each, which looks steppier. Decimal megabytes (1 MB = 1,000,000 bytes) are used here.
| Canvas | 1080 × 1080 px (1,166,400 pixels per frame) |
|---|---|
| Frames | N = 3 s × 24 fps = 72 |
| Raw frames before encoding | 72 × 1080 × 1080 × 4 bytes = 336 MB |
| MP4 / WebM upper estimate | 2.8 Mbps × 3 s ÷ 8 = 1.0 MB |
| GIF frame delay | 1/24 s is 4.17 centiseconds; GIF stores whole centiseconds, so delays alternate (4 and 5 cs) to average out |
Raw data for 1080 × 1080 at 72 frames is 72 × 4,665,600 = about 335.9 MB. As video at the default 2,799,360 bits per second, 3 seconds is about 1.05 MB. A turning object changes most of the frame every step, so there is little the encoder can reuse. The bitrate-based estimate is a reasonable guide for the video formats.
GIF handles this style worst. The shading across the face and sides spans many more colors than 256, so GIF shows visible bands and noisy dithering, called posterizing. Each frame builds its own palette, so the bands can also flicker from one frame to the next. MP4 and WebM encode smooth gradients without a palette. Choose those unless GIF is required.
Sources
Common mistakes
Exporting 3D as a GIF and blaming the render
The banding comes from the 256-color limit, not from your settings. Use MP4 or WebM.
A partial turn that jumps at the restart
Complete 360 degrees, or sway symmetrically.
Bevel too deep for the font size
At small sizes the bevel eats the letter shapes.
Face and side colors too close
Without contrast between them the depth disappears and the text looks flat.
Frequently asked questions
Why does my 3D text look banded as a GIF?
Smooth shading needs more than the 256 colors a GIF frame can hold. Export MP4 or WebM instead.
How fast does the text turn?
A full turn over the loop is 360 degrees divided by the frame count, for example 5 degrees per frame at 72 frames.
Which fonts work best in 3D?
Anton, Bungee, and Orbitron. Thin strokes leave little room for a visible side.
Can I get a transparent 3D export?
As GIF with 1-bit transparency or WebM in browsers that record it. MP4 cannot carry transparency.
Does it use my GPU or a server?
Rendering happens in your browser on your device. Nothing is uploaded.
Is there a watermark?
No. Export is free, no account needed.