Styles

Though Layouts behave as containers for other Rive objects, Layouts themselves can contain styles including:

• Fills
• Strokes
• Feathers
• Blend Modes
• Corner Radius

​

Background and Foreground styles

The above mentioned styles can be applied to a Layout such that either the style renders above (in front of) or below (behind) the Layout’s child objects. This can be useful for example, in cases where the Fill and Feathered drop shadow needs to render behind the children, but the stroke should render in front of the children.

​

Corner Radius

Fills, strokes and feathers applied on a Layout generate a rectangular shape, but you can modify any of the corners to have a custom corner radius. When applied, both background and foreground styles will draw themselves respecting the corner radius value.

​

Blend Modes

When a Layout has a background and/or foreground fill or stroke applied, a blend mode can be applied to the Layout that affects overlapping objects in two ways:

• If a style is applied to the background, it will apply the blend to any objects behind the Layout itself.
• If a style is applied to the foreground, it will apply the blend to all of the Layout’s children, the Layout’s background AND any objects behind the Layout itself.