Category
Effects blocks for WordPress
69 Gutenberg blocks in Blockenberg for motion, overlays, and visual treatments. Install the free plugin, then search the block name in the inserter.
Get Blockenberg
Blockenberg is free on WordPress.org. After activation, open the inserter and look under Effects.
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.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
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.
Content Ticker
A horizontal scrolling news/announcement ticker with a colored label prefix and clickable items.
Count Up
Animated number counter that counts up when scrolled into view.
Countdown
Display a countdown timer to a specific date and time.
Countdown Progress
Visual ring or bar countdown timer to a target date, with live ticking.
Creative Button
A single button with 6 advanced hover effect styles — fill slide, color wipe, 3D press, arrow reveal, ripple, and outline morph. Perfect for standout calls-to-action.
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Dark Mode Toggle
A light/dark mode switcher. Adds a toggle button that persists the user's theme preference to localStorage and applies a data attribute to the root element.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Flip Countdown
An airport-style flip-clock countdown timer with animated flip cards for days, hours, minutes and seconds.
Floating Stats
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance.
Floating Tags
Animated tag cloud where tags gently float with subtle motion.
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Gradient Blob
Full-width section with animated CSS gradient blobs as background and InnerBlocks for content.
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Handwriting Text
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
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.
Hovering Image Stack
A stack of images arranged in a fan/cascade that spreads outward on hover revealing all images.
Icon Cloud
An interactive 3D sphere of icons, emojis, or tag words that auto-rotates and responds to mouse movement. Great for showcasing skills, technologies, or topics.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Interactive Gradient Mesh
A mouse-reactive multi-colour gradient mesh background with optional heading and CTA overlay.
Interactive Image Sheen
An image card with a glossy light sheen that follows the mouse cursor, giving a premium holographic feel.
Kinetic Text
Text characters that scatter outward and snap back on hover with smooth physics animation.
Liquid Glass Cards
Glassmorphism-style frosted-glass cards with blur, border-light and subtle mouse-parallax effect.
Logo Ticker
Infinite scrolling logo marquee / ticker strip. Pure CSS animation.
Magnetic Button
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Marquee / Announcement Bar
Scrolling announcement bar with pause on hover and accessibility support.
Marquee Cards
Infinitely scrolling row of rich cards — images, headings, tags, and links. Ideal for features, use-cases, portfolio pieces, or team showcases.
Matrix Rain
Canvas-rendered Matrix-style digital rain with falling character columns. Fully customizable character set, colors, speed and overlay content.
Modal Window
A button or trigger that opens a customizable popup modal overlay.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Mouse Trail
Add a magical cursor trail effect to your page — sparkles, dots, comets, ribbons, stars, or fire. Works globally across the page or scoped to a specific section. No dependencies, pure canvas.
Neon Text
Glowing neon tube text effect with animated flicker, multi-color glow layers, animated background scanlines, and multiple neon color presets.
Noise / Grain Section
Hero or section block with a cinematic animated film-grain noise overlay rendered via Canvas. Supports solid, gradient, and image backgrounds with full heading, subtext, and CTA controls.
Notification Toast
Animated social-proof toast notifications that cycle in the corner of the screen — 'Sarah just signed up', 'Tom upgraded to Pro', etc.
Parallax Depth Cards
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Parallax Section
A full-width content section with a background image that scrolls at a different speed for a depth parallax effect.
Particle Text
HTML5 Canvas text that assembles from scattered particles on load. Hover to scatter and re-assemble. Perfect for hero sections and dramatic reveal effects.
Perspective Device
CSS device mockup (browser, phone, tablet, laptop) with screenshot inside — perfect for hero sections.
Reveal Swipe Cards
Before/after swipe reveal cards — drag the divider to uncover the back image.
Rotating Banner
A multi-message announcement carousel that auto-rotates between messages. Each message can have its own colors, link, and optional countdown timer.
Rotating Image Tiles
Responsive grid of tiles that continuously flip to reveal a second image, with staggered timing.
Scroll Reveal
Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport.
Scroll Sticky Content
Stripe/Linear-style two-column layout with a sticky heading panel on one side and scrollable feature cards on the other. Active item highlights as it enters the viewport.
Scrollytelling
Sticky background or image that updates as the user scrolls through text chapters.
Skill Rings
Animated SVG circular progress rings for showcasing skills, proficiencies, or statistics. Supports both concentric (nested rings) and row (individual rings) layouts with scroll-triggered fill animations.
Split-Flap Display
Recreate the iconic airport departure-board split-flap animation. Characters roll through the alphabet and settle on the target text. Supports multiple messages, ticker mode, custom colours, and scroll-triggered animation.
Split Text
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
Spotlight Reveal
A cursor-following spotlight that reveals content beneath a dark overlay. Move your mouse over the section to illuminate the hidden content.
Sticky Scroll
Apple-style storytelling layout: one column stays pinned while the opposite column scrolls through feature panels.
Crypto Price Ticker
Live cryptocurrency price ticker powered by the free CoinGecko API. Display scrolling prices, cards, or a table with 24 h change, market cap, volume, and coin icons. Auto-refreshes on a configurable interval.
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Text Path
Render text along a curved SVG path — arc, wave, circle or S-curve.
Text Reveal on Scroll
Cinematic scroll-triggered text reveal: words or characters animate in one by one as the section enters the viewport. Supports fade, slide-up, clip, and blur reveal modes with staggered delays.
Text Stroke
Large outlined/hollow text using CSS text-stroke with hover fill, gradient, and animation options.
Tilt Card
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
Typing Effect
Animated typewriter text that cycles through multiple phrases with a blinking cursor.
Unfold
Expandable content section that starts collapsed with a fade gradient and expands smoothly on button click.
Vertical Scroll Image
Display a tall or wide image in a fixed-height container. Hover to scroll through the full image vertically or horizontally. Perfect for showcasing app screenshots, infographics, or long designs.
Word Flip
Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text.