Skip to main content
Every layer in Ablo supports an effects field that controls its visual presentation independently of its content. You set opacity, round corners, apply CSS filters, align text vertically inside its box, and stack multiple drop shadows — all through a single typed object rather than an untyped style bag. Programmatic layers behave identically to ones produced by the editor. 
import { shadow } from '@abloatai/decks';

​
The effects object

The effects field follows the Effects type, which is a strict object with five optional properties. You can set any combination of them; omitted fields have no effect on the layer.
​
opacity
number
Layer opacity from 0 (fully transparent) to 1 (fully opaque). Applied to the entire layer including its fills, borders, and children.
​
borderRadius
number
Corner radius in pixels. Useful for rounding the corners of rectangle shapes or clipping image layers. Must be 0 or greater.
​
filter
string
A raw CSS filter value, applied verbatim to the layer. Use it for blur, brightness, contrast, or any other CSS filter function.
​
verticalAlign
'top' | 'middle' | 'bottom'
Controls how a text layer’s content is aligned vertically within its bounding box. Has no effect on non-text layers.
​
shadows
Shadow[]
An ordered array of shadow entries. Shadows are rendered back-to-front, so the last entry in the array sits on top. Build each entry with the shadow() helper.

​
shadow()

shadow(input?) builds a single Shadow entry with sensible defaults. All parameters are optional — calling shadow() with no arguments produces a soft, mid-opacity drop shadow that works well on most content.
​
color
string
Shadow color as any CSS color string. Defaults to 'rgba(0,0,0,0.25)'.
​
offsetX
number
Horizontal offset in pixels. Positive values push the shadow right, negative values push it left. Defaults to 0.
​
offsetY
number
Vertical offset in pixels. Positive values push the shadow down. Defaults to 4.
​
blur
number
Blur radius in pixels. Must be 0 or greater. Defaults to 12.
​
spread
number
Spread radius in pixels. Positive values expand the shadow; negative values shrink it. Defaults to 0.
​
opacity
number
Fractional opacity (0–1) applied on top of the color value. Defaults to 1.
​
inset
boolean
When true, renders the shadow as an inner shadow instead of a drop shadow. Defaults to false.

​
Examples

Add a soft drop shadow and slight transparency to a heading layer.
{
  type: 'text',
  text: 'Hello',
  style: 'h1',
  effects: {
    opacity: 0.9,
    shadows: [
      shadow({ color: 'rgba(0,0,0,0.3)', offsetX: 0, offsetY: 4, blur: 12 }),
    ],
  },
  at: { x: 160, y: 120, w: 1600, h: 200 },
}

​
Combining effects

All five properties work together on the same layer. The order of composition is: CSS filter is applied first (to the layer pixels), then border radius clips the result, then shadows are painted outside the clipped shape, and finally opacity fades the entire composited layer. 
import { shadow, solidFill, shape } from '@abloatai/decks';

// A card layer: rounded, elevated with a shadow, slightly transparent
const card = shape({
  shape: 'rectangle',
  fills: [solidFill('var(--slide-card)')],
  effects: {
    opacity: 0.95,
    borderRadius: 20,
    shadows: [
      shadow({ color: 'rgba(0,0,0,0.08)', offsetY: 2,  blur: 8  }),
      shadow({ color: 'rgba(0,0,0,0.12)', offsetY: 8,  blur: 24 }),
      shadow({ color: 'rgba(0,0,0,0.06)', offsetY: 16, blur: 48 }),
    ],
  },
  at: { x: 200, y: 200, w: 740, h: 480 },
});
shadow() fills in all unspecified fields with their defaults, so you only need to write the values that differ from the baseline. shadow({}) and shadow() produce the same result: a 0 4px 12px rgba(0,0,0,0.25) drop shadow.