Effects · Gutenberg
Liquid Glass Cards block for WordPress
Glassmorphism-style frosted-glass cards with blur, border-light and subtle mouse-parallax effect.
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
Glassmorphism-style frosted-glass cards with blur, border-light and subtle mouse-parallax effect.
Inspector panels on this block: Cards, Layout, Glass Effect, Background Gradient. Those titles come from index.js, not from a shared template.
Behavior controls: “Columns” options: 1, 2, 3, 4.
Where to find it
Gutenberg inserter → Effects → search “Liquid Glass Cards” (block name `blockenberg/liquid-glass-cards` in block.json). Style it in the sidebar after insert.
How to use Liquid Glass Cards block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Liquid Glass Cards”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Cards. Set “Cards — Title”, “Description”, “Link URL”, “Link text”.
- 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 |
|---|---|
| Cards — Title | Text field in the inspector. |
| Description | Text field in the inspector. |
| Link URL | Text field in the inspector. |
| Link text | Text field in the inspector. |
| Columns | Select control; the chosen value is saved on the block. Options: 1; 2; 3; 4. block.json default: 3. Saved as `columns`. |
| Show link button | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Card radius | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `cardRadius`. |
| Card padding | Numeric range control in the inspector. Range 12–72. block.json default: 32. Saved as `cardPadding`. |
| Icon size | Numeric range control in the inspector. Range 24–80. block.json default: 44. Saved as `iconSize`. |
| Blur amount (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `blurAmount`. |
| Glass opacity (%) | Numeric range control in the inspector. Range 0–80. block.json default: 18. Saved as `glassOpacity`. |
| Border opacity (%) | Numeric range control in the inspector. Range 0–100. block.json default: 30. Saved as `borderOpacity`. |
| Parallax strength | Numeric range control in the inspector. Range 0–30. block.json default: 8. Saved as `parallaxStrength`. |
| Glass tint | Color control in the inspector. block.json default: #ffffff. Saved as `glassColor`. |
| Border color | Color control in the inspector. block.json default: rgba(255,255,255,0.3). Saved as `borderColor`. |
| Colors — Title | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: rgba(255,255,255,0.8). Saved as `descColor`. |
| Icon bubble | Color control in the inspector. block.json default: rgba(255,255,255,0.2). Saved as `iconBg`. |
| Link text | Color control in the inspector. block.json default: #ffffff. Saved as `linkColor`. |
| Card shadow | Color control in the inspector. block.json default: rgba(0,0,0,0.2). Saved as `shadowColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Glassmorphism-style frosted-glass cards with blur, border-light and subtle mouse-parallax effect — that is the job of Liquid Glass Cards, not a generic content block.
- Use it when you need the editor control labeled “Cards — Title”, which exists on this block’s inspector.
- It matches pages about glass, glassmorphism, blur.
- 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 Liquid Glass Cards block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Liquid Glass Cards”. It sits under Effects. After insert, open Cards and set “Cards — Title”, “Description”, “Link URL”, “Link text”.
What makes Liquid Glass Cards different from other Blockenberg blocks?
Glassmorphism-style frosted-glass cards with blur, border-light and subtle mouse-parallax effect. Inspector labels on this block include “Cards — Title”, “Description”, “Link URL”, “Link text”.
Is the Liquid Glass Cards Gutenberg block free?
Yes. Liquid Glass Cards ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Liquid Glass Cards 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: Cards, Layout, Glass Effect, Background Gradient).
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.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Holographic Card
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Liquid Glass Cards from the Gutenberg inserter.