Effects · Gutenberg
Gradient Border Card block for WordPress
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
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 an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Inspector panels on this block: Content, Border Gradient, Card Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Animation Type” options: Rotate — border spins, Shift — gradient slides, Pulse — opacity breathes, Static — no animation; “Text Align” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Gradient Border Card” (block name `blockenberg/gradient-border-card` in block.json). Style it in the sidebar after insert.
How to use Gradient Border Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Gradient Border Card”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Show Badge”, “Badge Text”, “Show Icon”, “Title Tag”.
- 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 |
|---|---|
| Show Badge | On/off toggle in the inspector. Off by default. Saved as `showBadge`. |
| Badge Text | Text field in the inspector. Saved as `badge`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Title Tag | Select control; the chosen value is saved on the block. block.json default: h3. Saved as `titleTag`. |
| Content — Title | Text field in the inspector. block.json default: Feature Card. Saved as `title`. |
| Description | Multiline text field in the inspector. block.json default: An eye-catching card with an animated gradient border that draws attention and adds a premium feel to your design.. Saved as `description`. |
| Animation Type | Select control; the chosen value is saved on the block. Options: Rotate — border spins; Shift — gradient slides; Pulse — opacity breathes; Static — no animation. block.json default: rotate. Saved as `animType`. |
| Animation Speed (s) | Numeric range control in the inspector. Range 0.5–20. block.json default: 4. Saved as `animSpeed`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–12. block.json default: 2. Saved as `borderWidth`. |
| Glow Blur (px) | Numeric range control in the inspector. Range 0–60. block.json default: 14. Saved as `glowBlur`. |
| Glow Opacity | Numeric range control in the inspector. Range 0–1. block.json default: 0.7. Saved as `glowOpacity`. |
| Pause on Hover | On/off toggle in the inspector. Off by default. Saved as `pauseOnHover`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `borderRadius`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `paddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 8–80. block.json default: 28. Saved as `paddingH`. |
| Max Width (px) | Numeric range control in the inspector. Range 200–1200. block.json default: 420. Saved as `maxWidth`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `textAlign`. |
| Scale on Hover | On/off toggle in the inspector. On by default. Saved as `hoverScale`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Body | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBody`. |
| Badge | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBadge`. |
| Icon Size (px) | Numeric range control in the inspector. Range 16–100. block.json default: 36. Saved as `iconSize`. |
| Card Background | Color control in the inspector. block.json default: #0f172a. Saved as `cardBg`. |
| Title Color | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Body Text | Color control in the inspector. block.json default: #e2e8f0. Saved as `textColor`. |
| Icon Color | Color control in the inspector. block.json default: #a78bfa. Saved as `iconColor`. |
| Badge Background | Color control in the inspector. block.json default: #7c3aed. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI — that is the job of Gradient Border Card, not a generic content block.
- Use it when you need the editor control labeled “Show Badge”, which exists on this block’s inspector.
- It matches pages about gradient, border, 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 Gradient Border Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Gradient Border Card”. It sits under Effects. After insert, open Content and set “Show Badge”, “Badge Text”, “Show Icon”, “Title Tag”.
What makes Gradient Border Card different from other Blockenberg blocks?
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI. Inspector labels on this block include “Show Badge”, “Badge Text”, “Show Icon”, “Title Tag”.
Is the Gradient Border Card Gutenberg block free?
Yes. Gradient Border Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Gradient Border 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, Border Gradient, Card Style).
Related effects blocks
Gradient Blob
Full-width section with animated CSS gradient blobs as background and InnerBlocks for content.
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Holographic Card
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Gradient Border Card from the Gutenberg inserter.