Outline / Stroke
A stroke is a configurable border drawn around a block’s shape boundary. It is an independent property on the block, separate from the fill that renders inside and the effects that modify how that fill appears. Toggle the stroke on, configure its properties, and a line traces the shape’s outline at render time.
The stroke API supports color (RGB, CMYK, or spot color), width in pixels, line style (solid, dashed, dotted, and other patterns), position relative to the shape boundary, and opacity that is independent of the block’s overall opacity. Different block types support different stroke positions: text blocks use centered positioning, while other block types may support inner, outer, or centered depending on the type.
Stroke without fill
Since stroke and fill are independent, disabling the fill on a block leaves just the stroke visible: an outlined shape with a transparent interior. This is how you produce hollow shapes, framed elements, and outline-only graphics without compositing tricks.
The combination shows up in cases like:
- Outlined shapes that frame other content without obscuring the background
- Wireframe-style illustrations where structure is conveyed by outline only
- Decorative borders that emphasize a specific element
Producing a glow effect
CE.SDK does not have a dedicated glow API, but glow is achievable through the drop shadow property. The recipe:
- Set the drop shadow to a vivid color (the color of the glow)
- Set both X and Y offset to zero
- Set a large blur radius (the size of the glow)
- Increase the spread to intensify the effect
The result is a soft, colored halo that radiates outward from the block in every direction, which reads as a soft light. This works on text, shape, and image blocks. Combining a glow with a stroke produces a glowing outline, useful for emphasized buttons, neon-style typography, and product highlights.
Stroke in the editor UI
The stroke panel appears in the Inspector Bar when a supported block is selected. Users can toggle the stroke on or off and adjust its properties from there.
The same controls are available programmatically through the Block API’s stroke methods, which is what enables stroke configuration in template-authoring pipelines and headless design generation.
Controlling who can change the stroke
The stroke/change scope controls whether an Adopter can modify the stroke on a given block. Like all scopes, it is a per-block setting that the Creator configures during template authoring. Templates can permit stroke changes on some blocks (such as accent shapes the user is meant to recolor) while locking it on others (such as branded badges).
See fill for the content side, effects for the drop shadow and blur APIs (including the glow recipe above), and scope for the permission system.
Links
Documentation and references for this concept.
Related Terms
Graphic Block
The standard unified block type (//ly.img.ubq/graphic) for all image, video, shape, and sticker content in CE.SDK, compo…
Fill
The content layer of a graphic block that defines what is visually rendered inside the block's shape boundary, one of fi…
Scope
A named permission that controls whether a specific editing operation is allowed, operating at two levels: global (edito…