# Shadows and Glows

Add visual depth and emphasis to design elements using drop shadows and glow effects in CE.SDK.

![Shadows and Glows example showing text with drop shadow, image with glow effect, and shape with both](/docs/cesdk/_astro/browser.hero.BBy1_L1l_2cziPl.webp)

10 mins

estimated time

Live Demo[

Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[

StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-outlines-shadows-and-glows-browser)[

GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-outlines-shadows-and-glows-browser)

Drop shadows create the illusion of elements floating above the canvas, while glow effects add luminous halos that make elements stand out. CE.SDK provides two approaches: **drop shadows** as native block properties and **glow effects** through the effects system. Both can be applied to graphic blocks, text, and shapes.

```
import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
class Example implements EditorPlugin {  name = 'guides-outlines-shadows-and-glows-browser';  version = '1.0.0';
  async initialize({ cesdk }: EditorPluginContext): Promise<void> {    if (!cesdk) {      throw new Error('CE.SDK instance is required for this plugin');    }
    // Load assets and create scene    await cesdk.addDefaultAssetSources();    await cesdk.addDemoAssetSources({      sceneMode: 'Design',      withUploadAssetSources: true    });
    await cesdk.createDesignScene();
    const engine = cesdk.engine;    const page = engine.block.findByType('page')[0]!;
    // Set page dimensions    engine.block.setWidth(page, 800);    engine.block.setHeight(page, 600);
    // Add a gradient background that complements the beach image    const gradientFill = engine.block.createFill('gradient/linear');    engine.block.setFill(page, gradientFill);    engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [      { color: { r: 0.0, g: 0.75, b: 0.85, a: 1.0 }, stop: 0.0 }, // Turquoise      { color: { r: 0.95, g: 0.85, b: 0.7, a: 1.0 }, stop: 0.5 }, // Sandy      { color: { r: 0.85, g: 0.55, b: 0.45, a: 1.0 }, stop: 1.0 } // Coral    ]);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1);
    // Create a title text block to demonstrate drop shadow    const textBlock = engine.block.create('text');    engine.block.replaceText(textBlock, 'Shadows & Glows');    engine.block.setTextFontSize(textBlock, 80);    engine.block.setWidthMode(textBlock, 'Auto');    engine.block.setHeightMode(textBlock, 'Auto');    engine.block.setPositionX(textBlock, 40);    engine.block.setPositionY(textBlock, 40);    engine.block.appendChild(page, textBlock);
    // Set text color to white for contrast    const textFill = engine.block.getFill(textBlock);    engine.block.setColor(textFill, 'fill/color/value', {      r: 1.0,      g: 1.0,      b: 1.0,      a: 1.0    });
    // Check if block supports drop shadows    const canHaveDropShadow = engine.block.supportsDropShadow(textBlock);    console.log('Block supports drop shadow:', canHaveDropShadow);
    if (canHaveDropShadow) {      // Enable drop shadow on the block      engine.block.setDropShadowEnabled(textBlock, true);      const shadowIsEnabled = engine.block.isDropShadowEnabled(textBlock);      console.log('Drop shadow enabled:', shadowIsEnabled);
      // Set drop shadow color to a deep teal      engine.block.setDropShadowColor(textBlock, {        r: 0.0,        g: 0.3,        b: 0.4,        a: 0.8      });      const shadowColor = engine.block.getDropShadowColor(textBlock);      console.log('Drop shadow color:', shadowColor);
      // Set shadow offset (positive values move right/down)      engine.block.setDropShadowOffsetX(textBlock, 6);      engine.block.setDropShadowOffsetY(textBlock, 6);      const offsetX = engine.block.getDropShadowOffsetX(textBlock);      const offsetY = engine.block.getDropShadowOffsetY(textBlock);      console.log('Drop shadow offset:', offsetX, offsetY);
      // Set blur radius for soft shadow edges      engine.block.setDropShadowBlurRadiusX(textBlock, 12);      engine.block.setDropShadowBlurRadiusY(textBlock, 12);      const blurX = engine.block.getDropShadowBlurRadiusX(textBlock);      const blurY = engine.block.getDropShadowBlurRadiusY(textBlock);      console.log('Drop shadow blur:', blurX, blurY);    }
    // Create an image block to demonstrate glow effect    const imageUri = 'https://img.ly/static/ubq_samples/sample_4.jpg';    const imageBlock = await engine.block.addImage(imageUri, {      x: 450,      y: 150,      size: { width: 300, height: 300 }    });
    // Check if block supports effects (including glow)    const canHaveEffects = engine.block.supportsEffects(imageBlock);    console.log('Block supports effects:', canHaveEffects);
    if (canHaveEffects) {      // Create and apply a glow effect      const glowEffect = engine.block.createEffect('glow');      engine.block.appendEffect(imageBlock, glowEffect);
      // Configure glow parameters      engine.block.setFloat(glowEffect, 'effect/glow/size', 25);      engine.block.setFloat(glowEffect, 'effect/glow/amount', 0.7);      engine.block.setFloat(glowEffect, 'effect/glow/darkness', 0.25);      console.log('Glow effect applied');    }
    // Create a second image block to demonstrate combining shadow and glow    const secondImageUri = 'https://img.ly/static/ubq_samples/sample_5.jpg';    const combinedBlock = await engine.block.addImage(secondImageUri, {      x: 50,      y: 180,      size: { width: 300, height: 300 }    });
    // Apply both drop shadow and glow to the same block    if (engine.block.supportsDropShadow(combinedBlock)) {      engine.block.setDropShadowEnabled(combinedBlock, true);      engine.block.setDropShadowColor(combinedBlock, {        r: 0.0,        g: 0.2,        b: 0.3,        a: 0.6      });      engine.block.setDropShadowOffsetX(combinedBlock, 8);      engine.block.setDropShadowOffsetY(combinedBlock, 8);      engine.block.setDropShadowBlurRadiusX(combinedBlock, 20);      engine.block.setDropShadowBlurRadiusY(combinedBlock, 20);    }
    if (engine.block.supportsEffects(combinedBlock)) {      const combinedGlow = engine.block.createEffect('glow');      engine.block.appendEffect(combinedBlock, combinedGlow);      engine.block.setFloat(combinedGlow, 'effect/glow/size', 15);      engine.block.setFloat(combinedGlow, 'effect/glow/amount', 0.5);      engine.block.setFloat(combinedGlow, 'effect/glow/darkness', 0.15);    }    console.log('Combined shadow and glow applied');
    // Toggle drop shadow visibility    const wasEnabled = engine.block.isDropShadowEnabled(textBlock);    engine.block.setDropShadowEnabled(textBlock, false);    console.log(      'Shadow disabled:',      !engine.block.isDropShadowEnabled(textBlock)    );    engine.block.setDropShadowEnabled(textBlock, wasEnabled);    console.log(      'Shadow re-enabled:',      engine.block.isDropShadowEnabled(textBlock)    );
    // Toggle glow effect visibility    const effects = engine.block.getEffects(imageBlock);    if (effects.length > 0) {      const glowEffect = effects[0];      engine.block.setEffectEnabled(glowEffect, false);      console.log('Glow disabled:', !engine.block.isEffectEnabled(glowEffect));      engine.block.setEffectEnabled(glowEffect, true);      console.log('Glow re-enabled:', engine.block.isEffectEnabled(glowEffect));    }
    // Select the text block to show it in the inspector    engine.block.select(textBlock);  }}
export default Example;
```

This guide covers configuring drop shadows with dedicated API methods and applying glow effects through the effects system.

## Using the Built-in UI[#](#using-the-built-in-ui)

The CE.SDK editor provides shadow controls in the inspector panel when you select a supported block. The UI includes:

*   **Enable toggle** - Turn shadows on or off
*   **Color picker** - Choose shadow color with RGBA support
*   **Offset controls** - Adjust horizontal and vertical shadow position
*   **Blur controls** - Set shadow softness

Select any text, shape, or image block and access the shadow settings through the inspector panel.

## Drop Shadow Configuration[#](#drop-shadow-configuration)

Drop shadows are native block properties configured directly through dedicated API methods.

### Check Support and Enable[#](#check-support-and-enable)

Before configuring drop shadows, verify the block supports them using `supportsDropShadow()`. Enable the shadow with `setDropShadowEnabled()`.

```
await cesdk.createDesignScene();
const engine = cesdk.engine;const page = engine.block.findByType('page')[0]!;
// Set page dimensionsengine.block.setWidth(page, 800);engine.block.setHeight(page, 600);
```

Use `supportsDropShadow()` to check if the block supports shadows:

```
// Check if block supports drop shadowsconst canHaveDropShadow = engine.block.supportsDropShadow(textBlock);console.log('Block supports drop shadow:', canHaveDropShadow);
```

Once verified, enable the drop shadow:

```
// Enable drop shadow on the blockengine.block.setDropShadowEnabled(textBlock, true);const shadowIsEnabled = engine.block.isDropShadowEnabled(textBlock);console.log('Drop shadow enabled:', shadowIsEnabled);
```

### Set Shadow Color[#](#set-shadow-color)

Configure the shadow color using `setDropShadowColor()` with an RGBA color object. Color values range from 0.0 to 1.0.

```
// Set drop shadow color to a deep tealengine.block.setDropShadowColor(textBlock, {  r: 0.0,  g: 0.3,  b: 0.4,  a: 0.8});const shadowColor = engine.block.getDropShadowColor(textBlock);console.log('Drop shadow color:', shadowColor);
```

### Set Shadow Position[#](#set-shadow-position)

Control horizontal and vertical offset using `setDropShadowOffsetX()` and `setDropShadowOffsetY()`. Positive values move the shadow right and down, negative values move left and up.

```
// Set shadow offset (positive values move right/down)engine.block.setDropShadowOffsetX(textBlock, 6);engine.block.setDropShadowOffsetY(textBlock, 6);const offsetX = engine.block.getDropShadowOffsetX(textBlock);const offsetY = engine.block.getDropShadowOffsetY(textBlock);console.log('Drop shadow offset:', offsetX, offsetY);
```

### Configure Blur Radius[#](#configure-blur-radius)

Set shadow softness with `setDropShadowBlurRadiusX()` and `setDropShadowBlurRadiusY()`. Higher values create softer shadows.

```
// Set blur radius for soft shadow edgesengine.block.setDropShadowBlurRadiusX(textBlock, 12);engine.block.setDropShadowBlurRadiusY(textBlock, 12);const blurX = engine.block.getDropShadowBlurRadiusX(textBlock);const blurY = engine.block.getDropShadowBlurRadiusY(textBlock);console.log('Drop shadow blur:', blurX, blurY);
```

## Glow Effect Configuration[#](#glow-effect-configuration)

Glow effects are created through the effects system and attached to blocks that support effects.

### Check Support and Create Glow[#](#check-support-and-create-glow)

Verify the block supports effects using `supportsEffects()`, then create a glow effect with `createEffect('glow')` and attach it using `appendEffect()`.

```
// Check if block supports effects (including glow)const canHaveEffects = engine.block.supportsEffects(imageBlock);console.log('Block supports effects:', canHaveEffects);
```

Create the glow effect and attach it to the block:

```
// Create and apply a glow effectconst glowEffect = engine.block.createEffect('glow');engine.block.appendEffect(imageBlock, glowEffect);
```

### Configure Glow Parameters[#](#configure-glow-parameters)

Adjust glow appearance using `setFloat()` with glow-specific properties:

*   `effect/glow/size` - Controls the spread of the glow
*   `effect/glow/amount` - Controls glow intensity (0.0 to 1.0)
*   `effect/glow/darkness` - Controls the darkness/opacity of the glow

```
// Configure glow parametersengine.block.setFloat(glowEffect, 'effect/glow/size', 25);engine.block.setFloat(glowEffect, 'effect/glow/amount', 0.7);engine.block.setFloat(glowEffect, 'effect/glow/darkness', 0.25);console.log('Glow effect applied');
```

## Combining Shadows and Glows[#](#combining-shadows-and-glows)

Drop shadows and glow effects can both be applied to the same block. Drop shadows render independently of the effects stack, so both appear simultaneously.

```
// Apply both drop shadow and glow to the same blockif (engine.block.supportsDropShadow(combinedBlock)) {  engine.block.setDropShadowEnabled(combinedBlock, true);  engine.block.setDropShadowColor(combinedBlock, {    r: 0.0,    g: 0.2,    b: 0.3,    a: 0.6  });  engine.block.setDropShadowOffsetX(combinedBlock, 8);  engine.block.setDropShadowOffsetY(combinedBlock, 8);  engine.block.setDropShadowBlurRadiusX(combinedBlock, 20);  engine.block.setDropShadowBlurRadiusY(combinedBlock, 20);}
if (engine.block.supportsEffects(combinedBlock)) {  const combinedGlow = engine.block.createEffect('glow');  engine.block.appendEffect(combinedBlock, combinedGlow);  engine.block.setFloat(combinedGlow, 'effect/glow/size', 15);  engine.block.setFloat(combinedGlow, 'effect/glow/amount', 0.5);  engine.block.setFloat(combinedGlow, 'effect/glow/darkness', 0.15);}console.log('Combined shadow and glow applied');
```

## Managing Shadow and Glow State[#](#managing-shadow-and-glow-state)

### Toggle Drop Shadows[#](#toggle-drop-shadows)

Enable or disable drop shadows with `setDropShadowEnabled()`. Query the current state with `isDropShadowEnabled()`.

```
// Toggle drop shadow visibilityconst wasEnabled = engine.block.isDropShadowEnabled(textBlock);engine.block.setDropShadowEnabled(textBlock, false);console.log(  'Shadow disabled:',  !engine.block.isDropShadowEnabled(textBlock));engine.block.setDropShadowEnabled(textBlock, wasEnabled);console.log(  'Shadow re-enabled:',  engine.block.isDropShadowEnabled(textBlock));
```

### Toggle Glow Effects[#](#toggle-glow-effects)

Enable or disable glow effects with `setEffectEnabled()`. Query the state with `isEffectEnabled()`.

```
// Toggle glow effect visibilityconst effects = engine.block.getEffects(imageBlock);if (effects.length > 0) {  const glowEffect = effects[0];  engine.block.setEffectEnabled(glowEffect, false);  console.log('Glow disabled:', !engine.block.isEffectEnabled(glowEffect));  engine.block.setEffectEnabled(glowEffect, true);  console.log('Glow re-enabled:', engine.block.isEffectEnabled(glowEffect));}
```

## Troubleshooting[#](#troubleshooting)

### Shadow Not Visible[#](#shadow-not-visible)

*   Verify the block supports drop shadows using `supportsDropShadow()`
*   Check that drop shadow is enabled with `isDropShadowEnabled()`
*   Ensure offset values are non-zero to see the shadow
*   Verify the shadow color has sufficient opacity (alpha channel)

### Glow Not Appearing[#](#glow-not-appearing)

*   Verify the block supports effects using `supportsEffects()`
*   Check that the effect is enabled with `isEffectEnabled()`
*   Ensure glow amount and size are greater than 0

### Performance Issues[#](#performance-issues)

*   Limit the number of effects per block on mobile devices
*   Consider disabling shadows/glows during intensive editing operations
*   Use reasonable blur radius values to maintain performance

## API Reference[#](#api-reference)

| Method | Description |
| --- | --- |
| `block.supportsDropShadow(block)` | Check if block supports drop shadows |
| `block.setDropShadowEnabled(block, enabled)` | Enable or disable drop shadow |
| `block.isDropShadowEnabled(block)` | Check if drop shadow is enabled |
| `block.setDropShadowColor(block, color)` | Set shadow color (RGBA) |
| `block.getDropShadowColor(block)` | Get current shadow color |
| `block.setDropShadowOffsetX(block, offset)` | Set horizontal shadow offset |
| `block.setDropShadowOffsetY(block, offset)` | Set vertical shadow offset |
| `block.getDropShadowOffsetX(block)` | Get horizontal offset |
| `block.getDropShadowOffsetY(block)` | Get vertical offset |
| `block.setDropShadowBlurRadiusX(block, radius)` | Set horizontal blur radius |
| `block.setDropShadowBlurRadiusY(block, radius)` | Set vertical blur radius |
| `block.getDropShadowBlurRadiusX(block)` | Get horizontal blur radius |
| `block.getDropShadowBlurRadiusY(block)` | Get vertical blur radius |
| `block.supportsEffects(block)` | Check if block supports effects |
| `block.createEffect('glow')` | Create a glow effect instance |
| `block.appendEffect(block, effect)` | Attach glow to a block |
| `block.setFloat(effect, property, value)` | Set glow parameters |
| `block.setEffectEnabled(effect, enabled)` | Enable or disable glow |
| `block.isEffectEnabled(effect)` | Check if glow is enabled |
| `block.getEffects(block)` | Get all effects on a block |

## Next Steps[#](#next-steps)

[Using Strokes](vue/outlines/strokes-c2e621/) \- Add border outlines to elements

[Apply Filters and Effects](vue/filters-and-effects/apply-2764e4/) \- Explore additional visual effects

[Blur Effects](vue/filters-and-effects/blur-71d642/) \- Apply blur effects to elements

---



[Source](https:/img.ly/docs/cesdk/vue/outlines/overview-dfeb12)