Search
Loading...
Skip to content

Blur Effects

Apply blur effects to design elements using CE.SDK’s dedicated blur system for creating depth, focus, and atmospheric effects.

8 mins
estimated time
Download
StackBlitz
GitHub

Unlike general effects that stack on elements, blur is a dedicated feature with its own API methods. Each block supports exactly one blur at a time, though the same blur instance can be shared across multiple blocks. CE.SDK provides four blur types: uniform for consistent softening, linear and mirrored for gradient-based effects along axes, and radial for circular focal points.

This guide covers how to apply blur effects programmatically using the block API.

Programmatic Blur Application#

Initialize CE.SDK#

For applications that need to apply blur programmatically—whether for automation, batch processing, or dynamic content generation—we start by setting up CE.SDK with the proper configuration.

// Initialize CE.SDK engine in headless mode
const engine = await CreativeEngine.init({
  // license: process.env.CESDK_LICENSE, // Optional (trial mode available)
});

This initializes the CE.SDK engine in headless mode, giving you full API access to the blur system without UI dependencies.

Check Blur Support#

Before applying blur to a block, verify it supports blur effects. Graphic blocks with shapes and pages support blur.

// Create an image block to check blur support
const sampleBlock = await engine.block.addImage(imageUri, {
  size: { width: 300, height: 225 }
});
engine.block.appendChild(page, sampleBlock);


// Check if the block supports blur - graphic blocks with shapes support blur
const supportsBlur = engine.block.supportsBlur(sampleBlock);
console.log('Block supports blur:', supportsBlur);

Always check support before creating and applying blur to avoid errors.

Create and Apply Blur#

Create a blur instance using createBlur() with a blur type, then attach it to a block using setBlur(). Enable the blur with setBlurEnabled().

// Create a radial blur effect
const blur = engine.block.createBlur('//ly.img.ubq/blur/radial');

CE.SDK provides four blur types:

  • //ly.img.ubq/blur/uniform - Even softening across the entire element
  • //ly.img.ubq/blur/linear - Gradient blur along a line defined by two control points
  • //ly.img.ubq/blur/mirrored - Band of focus with blur on both sides (tilt-shift style)
  • //ly.img.ubq/blur/radial - Circular blur pattern from a center point

Configure Blur Parameters#

Each blur type has specific parameters to control its appearance. Configure them using setFloat().

// Configure radial blur parameters
engine.block.setFloat(blur, 'blur/radial/blurRadius', 40);
engine.block.setFloat(blur, 'blur/radial/radius', 100);
engine.block.setFloat(blur, 'blur/radial/gradientRadius', 80);
engine.block.setFloat(blur, 'blur/radial/x', 0.5);
engine.block.setFloat(blur, 'blur/radial/y', 0.5);

Radial blur parameters:

  • blur/radial/blurRadius - Blur intensity (default: 30)
  • blur/radial/radius - Size of the non-blurred center area (default: 75)
  • blur/radial/gradientRadius - Size of the blur transition zone (default: 50)
  • blur/radial/x - Center point x-value, 0.0 to 1.0 (default: 0.5)
  • blur/radial/y - Center point y-value, 0.0 to 1.0 (default: 0.5)

Uniform blur parameters:

  • blur/uniform/intensity - Blur strength, 0.0 to 1.0 (default: 0.5)

Linear blur parameters:

  • blur/linear/blurRadius - Blur intensity (default: 30)
  • blur/linear/x1, blur/linear/y1 - Control point 1 (default: 0, 0.5)
  • blur/linear/x2, blur/linear/y2 - Control point 2 (default: 1, 0.5)

Mirrored blur parameters:

  • blur/mirrored/blurRadius - Blur intensity (default: 30)
  • blur/mirrored/gradientSize - Hardness of gradient transition (default: 50)
  • blur/mirrored/size - Size of the blurred area (default: 75)
  • blur/mirrored/x1, blur/mirrored/y1 - Control point 1 (default: 0, 0.5)
  • blur/mirrored/x2, blur/mirrored/y2 - Control point 2 (default: 1, 0.5)

Apply Blur to Block#

After configuring the blur, apply it to the target block and enable it.

// Apply the blur to the image block
engine.block.setBlur(sampleBlock, blur);
engine.block.setBlurEnabled(sampleBlock, true);

The blur takes effect immediately once enabled. You can modify parameters at any time.

Managing Blur#

Access Existing Blur#

Retrieve the blur applied to a block using getBlur(). You can then read or modify its properties.

// Access the applied blur and its properties
const appliedBlur = engine.block.getBlur(sampleBlock);
const isEnabled = engine.block.isBlurEnabled(sampleBlock);
const blurType = engine.block.getType(appliedBlur);
console.log('Blur type:', blurType, 'Enabled:', isEnabled);

Enable/Disable Blur#

Toggle blur on and off without removing it using setBlurEnabled(). This preserves all blur parameters for conditional processing.

// Disable blur temporarily
engine.block.setBlurEnabled(sampleBlock, false);
console.log('Blur disabled:', !engine.block.isBlurEnabled(sampleBlock));


// Re-enable for final export
engine.block.setBlurEnabled(sampleBlock, true);

When disabled, the blur remains attached to the block but doesn’t render until re-enabled.

Blur Types#

Uniform Blur#

Applies consistent softening across the entire element. Best for simple background blur or overall softening.

// Create a uniform blur for even softening
const uniformBlock = await engine.block.addImage(imageUri, {
  size: { width: 300, height: 225 }
});
engine.block.appendChild(page, uniformBlock);
engine.block.setPositionX(uniformBlock, 350);


const uniformBlur = engine.block.createBlur('//ly.img.ubq/blur/uniform');
engine.block.setFloat(uniformBlur, 'blur/uniform/intensity', 0.6);
engine.block.setBlur(uniformBlock, uniformBlur);
engine.block.setBlurEnabled(uniformBlock, true);

Linear Blur#

Creates a gradient blur effect along a line defined by two control points. Useful for directional focus effects.

// Create a linear blur for gradient effect
const linearBlock = await engine.block.addImage(imageUri, {
  size: { width: 300, height: 225 }
});
engine.block.appendChild(page, linearBlock);
engine.block.setPositionY(linearBlock, 275);


const linearBlur = engine.block.createBlur('//ly.img.ubq/blur/linear');
engine.block.setFloat(linearBlur, 'blur/linear/blurRadius', 35);
engine.block.setFloat(linearBlur, 'blur/linear/x1', 0);
engine.block.setFloat(linearBlur, 'blur/linear/y1', 0);
engine.block.setFloat(linearBlur, 'blur/linear/x2', 1);
engine.block.setFloat(linearBlur, 'blur/linear/y2', 1);
engine.block.setBlur(linearBlock, linearBlur);
engine.block.setBlurEnabled(linearBlock, true);

Mirrored Blur#

Creates a band of focus with blur on both sides, commonly known as a tilt-shift effect. The control points define the focus band orientation.

// Create a mirrored blur for tilt-shift effect
const mirroredBlock = await engine.block.addImage(imageUri, {
  size: { width: 300, height: 225 }
});
engine.block.appendChild(page, mirroredBlock);
engine.block.setPositionX(mirroredBlock, 350);
engine.block.setPositionY(mirroredBlock, 275);


const mirroredBlur = engine.block.createBlur('//ly.img.ubq/blur/mirrored');
engine.block.setFloat(mirroredBlur, 'blur/mirrored/blurRadius', 30);
engine.block.setFloat(mirroredBlur, 'blur/mirrored/gradientSize', 50);
engine.block.setFloat(mirroredBlur, 'blur/mirrored/size', 75);
engine.block.setFloat(mirroredBlur, 'blur/mirrored/x1', 0);
engine.block.setFloat(mirroredBlur, 'blur/mirrored/y1', 0.3);
engine.block.setFloat(mirroredBlur, 'blur/mirrored/x2', 1);
engine.block.setFloat(mirroredBlur, 'blur/mirrored/y2', 0.7);
engine.block.setBlur(mirroredBlock, mirroredBlur);
engine.block.setBlurEnabled(mirroredBlock, true);

Export Results#

After applying blur effects, export the processed content to a file. CE.SDK supports various export formats including PNG, JPEG, and PDF.

// Export the scene to PNG
const blob = await engine.block.export(page, { mimeType: 'image/png' });
const buffer = Buffer.from(await blob.arrayBuffer());


// Ensure output directory exists
if (!existsSync('output')) {
  mkdirSync('output');
}


// Save to file
writeFileSync('output/blur-effects.png', buffer);
console.log('Exported to output/blur-effects.png');

The export operation renders all blur effects and saves the result to the file system. Always dispose of the engine instance when processing is complete to free resources.

Troubleshooting#

Blur Not Visible#

If blur doesn’t appear after applying:

  • Check the block supports blur with supportsBlur()
  • Verify blur is enabled with isBlurEnabled()
  • Ensure the blur instance is valid

Blur Appears on Wrong Area#

For radial, linear, and mirrored blurs:

  • Verify control point coordinates are within 0.0 to 1.0 range
  • Check that x/y values match your intended focus area

Blur Too Subtle or Too Strong#

  • Increase or decrease blurRadius or intensity values
  • For radial blur, adjust gradientRadius to control the transition softness

API Reference#

MethodDescription
block.createBlur(type)Create new blur instance
block.supportsBlur(block)Check if block supports blur
block.setBlur(block, blur)Apply blur to block
block.getBlur(block)Get blur from block
block.setBlurEnabled(block, enabled)Enable or disable blur
block.isBlurEnabled(block)Check if blur is enabled
block.setFloat(blur, property, value)Set blur float property
block.getFloat(blur, property)Get blur float property
block.getType(blur)Get blur type identifier
block.destroy(blur)Destroy unused blur instance