Effects · Gutenberg
Tilt Card block for WordPress
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
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
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
Inspector panels on this block: Content, Image & Icon, 3D Tilt Effect, Card Style. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Effects → search “Tilt Card” (block name `blockenberg/tilt-card` in block.json). Style it in the sidebar after insert.
How to use Tilt Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Tilt Card”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Heading”, “Body Text”, “Show Link”, “Link Label”.
- Check the published page. The view script reads HTML data attributes: data-glare, data-glare-opacity, data-perspective, data-tilt-max, data-tilt-scale. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Heading | Text field in the inspector. block.json default: Stunning Tilt Effect. Saved as `heading`. |
| Body Text | Text field in the inspector. block.json default: This card rotates in 3D as you move your mouse over it, creating a premium interactive feel.. Saved as `text`. |
| Show Link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Link Label | Text field in the inspector. block.json default: Learn more →. Saved as `linkLabel`. |
| Link URL | Text field in the inspector. block.json default: #. Saved as `linkUrl`. |
| Image Height (px) | Numeric range control in the inspector. Range 80–400. block.json default: 180. Saved as `imgHeight`. |
| Show Icon | On/off toggle in the inspector. Off by default. Saved as `showIcon`. |
| Icon Size (px) | Numeric range control in the inspector. Range 20–80. block.json default: 40. Saved as `iconSize`. |
| Max Tilt Angle (deg) | Numeric range control in the inspector. Range 2–30. block.json default: 15. Saved as `tiltMax`. |
| Scale on Hover (%) | Numeric range control in the inspector. Range 100–120. block.json default: 105. Saved as `tiltScale`. |
| Perspective (px) | Numeric range control in the inspector. Range 300–2000. block.json default: 800. Saved as `perspective`. |
| Glare Effect | On/off toggle in the inspector. On by default. Saved as `glareEffect`. |
| Glare Opacity (%) | Numeric range control in the inspector. Range 5–80. block.json default: 30. Saved as `glareOpacity`. |
| Card Width (px) | Numeric range control in the inspector. Range 200–600. block.json default: 340. Saved as `cardWidth`. |
| Card Padding (px) | Numeric range control in the inspector. Range 12–60. block.json default: 28. Saved as `cardPadding`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `cardRadius`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Heading Color | Color control in the inspector. block.json default: #1f2937. Saved as `headingColor`. |
| Text Color | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Link Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `linkColor`. |
| Icon Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-glare, data-glare-opacity, data-perspective, data-tilt-max, data-tilt-scale.
When this is the right block
- Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link — that is the job of Tilt Card, not a generic content block.
- Use it when you need the editor control labeled “Heading”, which exists on this block’s inspector.
- It matches pages about tilt, hover, card.
- 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 Tilt Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Tilt Card”. It sits under Effects. After insert, open Content and set “Heading”, “Body Text”, “Show Link”, “Link Label”.
What makes Tilt Card different from other Blockenberg blocks?
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link. Inspector labels on this block include “Heading”, “Body Text”, “Show Link”, “Link Label”.
Is the Tilt Card Gutenberg block free?
Yes. Tilt Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Tilt Card 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: Content, Image & Icon, 3D Tilt Effect, Card Style).
Related effects blocks
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Holographic Card
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Parallax Depth Cards
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
3D Text
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
Install Blockenberg from WordPress.org, then insert Tilt Card from the Gutenberg inserter.