Effects · Gutenberg
3D Text block for WordPress
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Inspector panels on this block: Text, 3D Effect, Animation, Layout & Background. Those titles come from index.js, not from a shared template.
Behavior controls: “HTML tag” options: H1, H2, H3, H4, p; “Text transform” options: UPPERCASE, lowercase, Capitalize, None; “Text — Alignment” options: Left, Center, Right; “3D style” options: Extrude (stacked shadow), Long shadow, Retro (outline + shadow), Isometric, Emboss.
Where to find it
Gutenberg inserter → Effects → search “3D Text” (block name `blockenberg/3d-text` in block.json). Style it in the sidebar after insert.
How to use 3D Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “3D Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text. Set “Text — Text”, “HTML tag”, “Text transform”, “Text — Alignment”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Text — Text | Text field in the inspector. block.json default: 3D TEXT. Saved as `text`. |
| HTML tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4; p; div. block.json default: h2. Saved as `tag`. |
| Text transform | Select control; the chosen value is saved on the block. Options: UPPERCASE; lowercase; Capitalize; None. block.json default: uppercase. Saved as `textTransform`. |
| Text — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| 3D style | Select control; the chosen value is saved on the block. Options: Extrude (stacked shadow); Long shadow; Retro (outline + shadow); Isometric; Emboss. block.json default: extrude. Saved as `style3d`. |
| Depth (px) | Numeric range control in the inspector. Range 1–40. block.json default: 8. Saved as `depth`. |
| Shadow angle (°) | Numeric range control in the inspector. Range 0–360. block.json default: 45. Saved as `angle`. |
| Gradient text fill | On/off toggle in the inspector. Off by default. Saved as `gradientText`. |
| Idle animation | Select control; the chosen value is saved on the block. Options: None; Float up/down; Pulse depth; Shimmer. block.json default: none. Saved as `animation`. |
| Hover effect | Select control; the chosen value is saved on the block. Options: Tilt (3D rotate); Press (depth collapse); Lift (shadow grows); None. block.json default: tilt. Saved as `hoverEffect`. |
| Show reflection | On/off toggle in the inspector. Off by default. Saved as `showReflection`. |
| Show background | On/off toggle in the inspector. On by default. Saved as `showBg`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `paddingV`. |
| Horizontal padding (px) | Numeric range control in the inspector. Range 0–120. block.json default: 32. Saved as `paddingH`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 0. Saved as `borderRadius`. |
| Typography — Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `textTypo`. |
| Text color | Color control in the inspector. block.json default: #6366f1. Saved as `textColor`. |
| Depth / extrude color | Color control in the inspector. block.json default: #312e81. Saved as `depthColor`. |
| Drop shadow color | Color control in the inspector. block.json default: rgba(0,0,0,0.25). Saved as `shadowColor`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `backgroundColor`. |
| Gradient start | Color control in the inspector. block.json default: #a78bfa. Saved as `gradientFrom`. |
| Gradient end | Color control in the inspector. block.json default: #60a5fa. Saved as `gradientTo`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography — that is the job of 3D Text, not a generic content block.
- Use it when you need the editor control labeled “Text — Text”, which exists on this block’s inspector.
- It matches pages about text, extrude, depth.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the 3D Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “3D Text”. It sits under Effects. After insert, open Text and set “Text — Text”, “HTML tag”, “Text transform”, “Text — Alignment”.
What makes 3D Text different from other Blockenberg blocks?
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography. Inspector labels on this block include “Text — Text”, “HTML tag”, “Text transform”, “Text — Alignment”.
Is the 3D Text Gutenberg block free?
Yes. 3D Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style 3D Text to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Text, 3D Effect, Animation, Layout & Background).
Related effects blocks
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Neon Text
Glowing neon tube text effect with animated flicker, multi-color glow layers, animated background scanlines, and multiple neon color presets.
Parallax Depth Cards
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Tilt Card
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert 3D Text from the Gutenberg inserter.