Animated Backgrounds allow you to transform a static section into a dynamic visual experience—without writing any custom code. UiCore Animate includes 21 background effects that you can apply to any container, section, or block.
These animations are lightweight, fully customizable, and work in both Elementor and Gutenberg.
How to Enable Animated Backgrounds
Elementor
- Select the section where you want the effect.
- Go to the Style tab.
- Open the Background panel.
- Enable Animated Background.
Gutenberg
If you are using UiCore Blocks (recommended)
Animated Backgrounds are built directly into the block options.
- Select your Container.
- Go to the Style tab.
- Open the Background panel.
- Enable Animated Background and choose your preset.
All background animations will be applied directly to that block.
If you are using Gutenberg without UiCore Blocks
You will find a dedicated Animated Background block in the inserter.
- Add the Animated Background block to your page.
- Place your content blocks inside it.
The animation is applied to the parent block’s background, while all inner blocks are simply displayed on top of it.
This approach allows you to use Animated Backgrounds even in the default Gutenberg editor without the UiCore Blocks builder.
Animation Settings
All animated backgrounds share a common set of controls (some presets also include additional options):
Scale
Adjusts the size or height of the animation. Higher values usually zoom out the effect.
Intensity
Controls the strength of the effect. Depending on the preset, it may change:
- blur
- distortion
- blending
- fade
- particle strength
Disable Motion
Turns the animation into a static background while preserving its shape and colors. Combined with Stop Frame, you can position the shape exactly where you want it.
Noise
Adds a moving grain layer on top of the effect.
Mouse Interactive
Adds slight movement following cursor position.
Offset / Angle
Controls the position and orientation of the effect.
Colors
Each effect supports between 1 and 4 colors. You can remove parts of an animation by setting individual colors to black.
Opacity
Blends the animated background with your existing background color or image.
Animation Presets
Animated Backgrounds include 21 presets grouped into six categories. Each preset provides a different visual style, from gradients and particles to light effects and image-based distortions:
Fluid Gradient
A multi-color gradient mesh with soft flowing waves:
Tip: Works best with: 4 vibrant colors, low scale, low intensity
Borealis
An aurora-like light effect moving across the background:
Tip: Use low scale and high intensity.
Gradient Mesh
A smooth, blended gradient using all colors, without heavy wave motion:
Tip: Similar settings to Fluid Gradient, but calmer.
Mist
A smoke-like effect using a single color:
Tip: Includes rotation and offset for randomizing the motion.
Mystic Lake
An oily, reflective liquid surface:
Tip: Setting a gray color creates a holographic shine.
Noir Haze
Soft, diffused haze with slow color blending:
Tip: Intensity defines how strongly colors mix.
Void Wave
A silky liquid motion with ripple effects:
Tip: Increasing scale zooms out to reveal more ripple detail.
Halftone
An abstract, fluid shape with a halftone texture:
Tip: Use low scale + low intensity for subtle designs.
The Shining
Sun-ray style lighting with soft cloudy movement:
Tip: Mouse Interactive makes the rays follow the cursor.
Phase Tunnel
A warp-speed tunnel effect:
Tip: Higher intensity + noise makes the lines more defined.
Plasma Line
Two glowing ellipse rings that cycle through your color palette:
Tip: Uses all 4 colors but cycles gradually.
Light Strings
A DNA-like string pattern blending your chosen colors:
Tip: Using only two colors creates a more minimal look.
Flame
A realistic animated fire effect:
Tip: Increase intensity for stronger movement.
Pulse Bubble
A wobbly bubble shape you can place behind content:
Tip: Large scale values show only a portion of the bubble.
Neon Eclipse
A multicolor rotating glow, similar to an eclipse halo:
Tip: Adjust offset + scale to position it anywhere.
Echo Sphere
A pulsating beacon with radial color changes:
Tip: More noise results in a more organic texture.
Liquid Mask
An interactive organic reveal that follows mouse movement:
Tip: Scale = reveal area, Intensity = organic deformation
Liquid Image
Distorts the background image based on mouse movement:
Tip: Scale = distortion amount. Intensity = edge desaturation
Bit Wave
An organic animation that reveals random characters:
Tip: Disable motion to remove pulsing while keeping wave movement.
Flux Stripes
Window-shader style stripes that animate on mouse movement:
Tip: Intensity controls reveal strength.
Perspective Grid
A retro-style 3D grid with animated background particles:
Tip: Each color controls a part of the effect—set a color to black to disable that section.
