Flexible Image - Procedural UI That Always Batches

DISCUSSION | DISCORD | SUPPORT/INQUIRIES

(Reviews prior to November 2025 are from a previous version of a similar asset, which recieved a free upgrade)

One shared material. Everything batches

Flexible Image extends Unity's Image component with GPU-based shape generation. All properties are delivered through packed vertex attributes, so every element uses the same material regardless of appearance. This means you can have any number of wildly different elements that go through the same draw call.

Multiple shapes per component

Flexible Image can render multiple shapes in one component, also without adding draw calls. Each shape has independent anchoring, sorting, and full property control. Build complex UI elements without nesting GameObjects.

FEATURES

SHAPE CONTROL

▪ Per-corner chamfer.

▪ Toggle between per-corner concavity (round, flat, scooped) or smoothness (squircles!)

▪ Edge collapse enables dynamic transformation from rectangle into triangle, trapezoid, parallelogram, chevron, and more

▪ Edge softness for anti-aliasing

▪ Stroke

▪ Tools for even more complex shapes, including cutouts and UV Rect for partial shape rendering

▪ Transform-independant size, position, rotation

▪ Advanced raycast target mode selects which procedural shape properties apply to mouse/pointer input (can account for rounded corners, stroke, cutout, etc.)

COLOR SYSTEM

▪ Four color sections: primary, outline, procedural gradient, and pattern

▪ Each section supports vertex gradients (up to 3x3 color grids)

▪ Alpha channel for each section can control transparency, or blend with the section below

▪ Procedural gradient types include: SDF, Angle, Radial, Conical, and Noise

▪ Procedural gradients can be positioned relative to the mouse cursor to create responsive interactable elements

▪ Procedural gradients are per-pixel and intelligently dithered, with modes for SDF, angle, radial and conical gradients

▪ Procedural gradient and pattern sections can independently display over the primary color, outline color, or both

▪ Procedural gradient and pattern sections can be rendered in screen-space, allowing continuity between components

▪ Patterns can be generated procedurally, or with a texture.

ANIMATION

▪ The fastest way to author AAA-quality UI animations

▪ Built-in animation state machine responds to Selectable events

▪ Option to override the (somewhat infamous) default behaviour where Selected state is not able to transition back to Highlighted state

▪ Tween any numeric property

▪ Lighter than Unity's animation system, more powerful than color/sprite swaps

TEXTURE BAKING

▪ Bake any procedural setup to a texture

▪ Configurable resolution and supersampling

▪ Optional 1px padding for filtering

COMPATIBILITY

▪ Tested on Unity 2022.3+ (likely works back to 2022.1, but not officially supported)

▪ Works with all Canvas types and render pipelines

▪ Supports UGUI. Does not support UIToolkit

▪ Advanced raycast mode filters input hotzone by selected procedural properties (rounded corners, cutouts, etc.)

▪ Supports all standard "UGUI Image" component features (masks, fills, sliced sprites, etc.)

MISC.

▪ Source code and documentation included

▪ Higher visual quality and generally better performance (at native resolution) than texture-based UIs on modern hardware

▪ Extremely competitive performance with other procedural UI solutions, even when controlling for draw calls (i.e. many instances of similar elements that share the same material), with potentially much greater performance in the real world

Integrates with Flexible Blur, the most advanced UI Blur solution for Unity, to add beautiful blur effects to procedural elements.

Available in the Flexible UI Suite Bundle.

Supported by Figma Converter, which can convert your Figma project directly into FlexibleImage components.