Fill

A fill is what renders inside a graphic block. The block’s shape defines the boundary; the fill defines what fills that boundary. An image, a video, a solid color, a gradient: each is a fill type, and each can be assigned, replaced, or removed independently of the block’s geometry.

Fill and shape are separate objects on the same block. Changing one does not affect the other. Swap a rectangle shape for an ellipse and the image inside reflows to the new boundary. Swap an image fill for a color fill and the shape stays put. This separation is what makes non-destructive editing possible: the original image is preserved as the fill, and crop or transform operations adjust how the shape clips it without touching the underlying pixels.

• Image fill renders a raster image inside the block’s shape. Supports a source set for responsive images at multiple resolutions. This is the standard fill for photos, product images, and any static image content.
• Video fill renders a video clip inside the block’s shape with playback properties (volume, speed, trim). Used in both the Design Editor as overlays and the Video Editor as timeline clips.
• Color fill renders a solid color. Supports RGB, CMYK, and spot color values, which makes it suitable for both screen and print workflows.
• Gradient fill renders a color transition. CE.SDK supports three gradient types: linear (along an axis), radial (outward from a center point), and conical (rotating around a center point). Each is defined by color stops at specified positions.

This is the capability most integrations do not notice on first read: a single fill instance can be attached to multiple graphic blocks at once. Changing the shared fill (updating a color, swapping an image source) propagates to every block that references it.

The practical applications:

• Brand color enforcement. Create one color fill for the brand primary, attach it to every block that uses that color. When the brand color changes, update one fill and the whole scene updates. No find-and-replace pass across blocks.
• Synchronized media across pages. Multi-page documents that need the same background or logo image can share one image fill. Replace it once, every page updates.

When a block with a shared fill is destroyed, the fill itself stays alive until every block referencing it is gone. This makes shared fills safe to use without lifecycle ceremony.

Any fill type can be replaced with any other fill type on the same graphic block. Swap an image fill for a video fill, or a color fill for a gradient: the underlying block, its shape, its position, and its size all stay unchanged. Only the content inside the shape changes.

This is the mechanism behind the Replace action in the editor. When a user clicks Replace on an image placeholder, the editor is swapping the block’s fill while leaving everything else about the block intact.

A fill can be enabled or disabled on a block independently of its other properties. Disabling the fill leaves only the stroke visible (if one is configured), which is how outlined shapes with transparent interiors are produced.

See shape for the geometry side, graphic-block for the container that combines fill and shape, and outline-stroke for the bordering side.