The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="wrap">
  <h1 class="extrude" aria-label="3D Text">3D TEXT</h1>
  <p>Pure CSS. No images, no canvas.</p>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a 3D extruded text headline using only HTML and CSS.

Requirements:
- A heading that reads "3D TEXT", white, font-weight 900, size clamp(3.5rem, 15vw, 9rem), on a dark radial-gradient background.
- Create the 3D depth with a stack of ten hard text-shadows, each offset one pixel further down and right than the previous (1px 1px, 2px 2px ... 10px 10px) with zero blur, in orange shades that get gradually darker from #ff9a3d to #853f00.
- Add two more soft, blurred, dark shadows after the stack to act as a drop shadow on the ground.
- Wrap the heading in an element with perspective: 900px and animate the heading with a keyframe animation that rocks it between rotateX(18deg) rotateY(-22deg) and rotateX(8deg) rotateY(22deg) over 6 seconds, ease-in-out, alternating forever.
- Under prefers-reduced-motion, stop the animation and show a fixed tilt.
- Add a short grey caption underneath.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Start with thick, heavy text. Extrusion needs a bold weight (800 or 900) to look solid.

2. 2

   Add a text-shadow offset by 1px in both directions with no blur. It looks like a thin edge.

3. 3

   Repeat it at 2px, 3px and so on. Because each layer touches the next, the eye reads them as one continuous side wall.

4. 4

   Darken the colour step by step towards the back to imitate shading.

5. 5

   Finish with one or two large, blurred, dark shadows so the text appears to sit above a surface.

6. 6

   Rotate the text inside a perspective container to show off the depth.

Customisation tips

• More layers give a deeper extrusion; generate long stacks with a Sass loop or a small script.
• Flip the offset signs (for example -1px 1px) to extrude in another direction.
• This works on any live text, so it stays selectable, translatable and readable by search engines.

More 3d scenes