UI Shapes

One component for Unity UI. Add a UIShape to any UI element and you get rounded, squircle, octagonal or slanted shapes with fill, gradients, textures, drop shadow, inner shadow, glow, outline, bevel and background blur, plus soft masking, progress wipes and per-state button styling. No sprites, no 9-slices, no render textures. Everything stays crisp at any resolution.

Requirements

• Unity 2022.3 LTS or newer, and a uGUI Canvas. Nothing else is required.
• Built-in, URP and HDRP all supported, and UI looks identical on all three. Background Blur needs a one-time setup step on URP (see its section).
• Shader Model 3.0+: mobile (GLES 3.0 / Metal / Vulkan), desktop, consoles and VR. OpenGL ES 2.0 is not supported.

The demo scene is UI Shapes/Demo/UI Shapes Demo Scene.unity. It runs on any render pipeline.

• The labels use TextMeshPro, so import TMP Essentials when Unity offers to. UI Shapes itself has no TMP dependency.

Quick Start

1. Select a UI GameObject, or create an empty one under your Canvas.
2. Add Component ▸ UI ▸ UI Shape.
3. Tick the effects you want in the inspector and tune them. The component builds and manages everything itself.

To make it interactive, click Add... next to the Selectable field at the top of the inspector. See Interactive Controls.

Ready-Made Controls

To start from a finished control rather than a blank shape, use GameObject ▸ UI. The UI Shapes entries sit at the top of that menu, above Unity's own. Every one builds the whole hierarchy out of UI Shapes, with no Image and no sprites anywhere, and with its hover and pressed looks already set up.

Dropdown and Input Field use TextMeshPro, so they appear only when TMP is installed. Everything else works either way, and adds a TMP label when TMP is there.

To turn a shape you've already styled into a control instead, click Add... next to Selectable and pick from the same list. Your shape becomes the control's background, and any parts it needs are created inside it. Scroll View isn't offered there, since a scrolling area has no states to drive.

Using the Inspector

Each effect is a collapsible module, styled like Unity's Particle System. The checkbox in the module header is the on/off switch, and clicking the bar expands the settings. A module you expand while it's off shows its settings read-only.

Most effects share the same handful of controls at the top of their module, described once under Common Controls. Each effect's section below lists only its own settings.

All sizes and distances are in canvas units, and all angles are in degrees.

Shape

Fill, outline, shadows, glow and bevel all follow the corner style, so the shape keeps one silhouette. Style and radii animate and can be overridden per button state. Transitions between Sharp, Rounded and Squircle morph the corners rather than popping, because squareness 0 is exactly the Rounded arc.

Pick a style by looks. Sharp, Rounded and Octagonal all cost the same. Squircle costs a little more, mostly on the soft effects, and only on the shapes that use it. That difference never registers on PC or console, and on mobile ordinary squircle buttons and panels are fine. The case worth profiling is a whole screen of squircle panels each carrying a drop shadow.

Skew

Turn the Skew module on to slant the shape like italic text. It's purely visual, so the RectTransform, layout and anchoring don't change, and every effect slants with it, still anti-aliased.

The module has its own on/off switch, so you can keep an angle set and switch the slant per button state, where it fades in and out smoothly.

A trapezoid narrows as the angle grows and stops before the edges cross, settling into a clean triangle. How steep you can go depends on the element's proportions: a tall element takes a much steeper angle than a short one.

Soft masks, Background Blur and click detection all follow the slanted outline.

A slanted shape costs the same as an upright one to draw, unless you turn Even Effect Width on: see Performance & Platforms.

Common Controls

These four settings appear on most effect modules. Each effect section below says which of them it has, then lists its own specific fields.

Gradients

Wherever Color Mode offers a gradient, the choices are Vertical (top to bottom), Horizontal (left to right), or Custom Angle, which adds an Angle slider (0° puts the end color on the right, 90° on top).

Fill uses Unity's own gradient editor: click the Gradient field and add as many color and alpha stops as you like, anywhere along the ramp. Set the gradient's own mode to Fixed for hard-edged bands instead of a smooth blend. Every other effect (Texture, Drop Shadow, Inner Shadow, Glow, Outline) keeps a simpler start and end color, which is what those effects are normally used for.

Colors carry alpha, so a transparent stop gives a clean fade-out, and alpha stops can sit at different positions from the color stops. Colors blend the way they do in Photoshop, Figma and CSS. Gradients cost nothing extra to draw, and state transitions cross-fade them, including between a single color and a gradient, or between two gradients with different numbers of stops.

Fill

The shape's interior, as a single color or a multi-stop gradient.

Common controls: Color Mode and Opacity. Fill has no blend mode or intensity of its own, since it's the bottom layer everything else composites over. Textures are a separate module, covered next.

Texture

A sprite drawn on top of the Fill and clipped to the shape's corners. It has its own on/off switch, so you can use it with Fill off. With no sprite assigned it draws a plain white rect, which the tint turns into a flat colored layer.

Common controls: Color Mode, Blend Mode and Opacity. The color here is a tint: it multiplies the sprite's own colors rather than replacing them, like Image.color. White, the default, leaves the sprite untouched, and a grayscale or white sprite can be recolored freely. A gradient Color Mode tints across the shape, so one sprite can fade between two colors. The tint's alpha multiplies with Opacity.

Texture Fit handles mismatched aspect ratios:

Every fit works from the sprite's full authored size, including any transparent border, so artwork sitting off to one side keeps its intended aspect and position. A sprite packed into a trimmed Sprite Atlas is the exception: the border no longer exists there, so the fit uses the trimmed artwork. Set the sprite to Mesh Type: Full Rect if you need the border preserved in an atlas.

Textures always render upright. They never shear with a skewed shape, though the silhouette still clips them. The tint gradient does follow the shape, so it stays aligned with the fill's gradient.

Every Texture field animates and can be overridden per state, so a state can swap the sprite, the fit, the tint or the opacity. Grayscale is on or off rather than an amount, so it switches at the start of a state transition instead of fading across it, like Texture Fit and the blend modes. The two fields below are the exception: they apply to the whole shape rather than per state, so you'll find them on the Normal tab only.

Effects That Follow the Picture

Cut-out artwork, an icon, a character or a logo on a see-through background, usually wants its shadow and its outline around the picture, not around the rect it sits in. Tick Use Texture Outline for Effects and they do.

Every effect keeps all of its settings. Width, Placement, Radius, Distance, Spread, colors and blend modes all behave exactly as they do on a plain shape.

The tick appears once you assign a sprite, and it turns itself on the first time you assign one with a see-through background to a shape that has no Fill. Turn it off any time; it stays off after that.

Drop Shadow

A soft shadow behind the element.

Common controls: Color Mode, Opacity, Blend Mode and Intensity.

The shadow is cut out of the shape's interior, so a semi-transparent glass panel never shows its own shadow through itself.

Inner Shadow

A soft shadow drawn inside the shape's edge, for a recessed look. It covers the outer edge completely, so no rim of fill color peeks through.

Common controls: Color Mode, Opacity, Blend Mode and Intensity.

Glow

A halo around the shape, additive by default. It's centered, so unlike the shadows it has no distance or angle, and like the drop shadow it renders only outside the shape. The halo keeps an even width all the way around, so corners stay as sharp or as round as the shape's own.

Common controls: Color Mode, Opacity, Blend Mode and Intensity.

Outline

A stroke on the shape's edge.

Common controls: Color Mode, Opacity and Blend Mode. The outline is a hard-edged effect, so it has no intensity.

On a sharp-cornered shape, Outside and Center strokes miter to a point. With a radius, the outer edge grows to radius + width, the way design tools stroke a rounded rectangle.

Bevel

A Photoshop-style inner bevel: a lit band along the edge, with a highlight on the light-facing side and a shadow opposite, wrapping around rounded corners.

Bevel has no single color of its own. Instead the highlight and the shadow each get their own Color, Opacity and Blend Mode, so you can tune the two halves independently. The defaults are additive white and normal black; set the shadow to Multiply for the classic Photoshop look.

Background Blur

Frosted glass, blurring whatever is rendered behind the shape. Pair it with a semi-transparent Fill for tinted glass. It's clipped to the shape's corners, respects soft masks, and composes correctly where panels overlap.

Blur has none of the common controls. Its three settings are its own, and the tint comes from the Fill module underneath.

Setup Per Pipeline

Progress

Reveal a fraction of the shape, like an Image's Fill Amount, for radial timers, linear bars and cooldown sweeps. Off by default; turn the module on with its header checkbox.

The wipe has smooth anti-aliased edges, adds no draw calls, and works with masking, the Animator and button states. Gradients, textures and bevels are revealed exactly as far as the Amount.

Masking

A mask hides whatever its children draw outside it. Use one to keep a scrolling list inside its panel, or to make a square photo come out round.

A shape is clipped by the nearest Soft mask above it. Nesting one Soft mask inside another clips against the inner one only, so content can spill past the outer mask; make the outer one Simple if you need both to clip.

What Soft Clips

• Child Images and RawImages.
• Child UI Shapes, with fill, shadows, glows and outlines all following the mask together.
• TextMeshPro text, when TMP is installed. Inline sprites and fallback fonts stay unclipped, and TMP's more advanced effects aren't drawn while the text is clipped.

Soft also skips rows that scroll fully out of sight, so a long list only costs you what's on screen.

Padding and Softness

Soft mode adds two settings that reshape the clipped area:

Each takes four values, for Left, Right, Top and Bottom, so every side can differ:

Both belong to the shape itself, so they stay the same across button states and aren't saved into a style. From script they're MaskingPadding and MaskingSoftness.

Maskable, the last field in the module, works in every mode. Turn it off to stop a mask further up the hierarchy from clipping this shape, so a large shadow or glow can spill outside a masked parent. It controls whether this shape is clipped, not whether it clips others.

Clicks & Raycasting

Whether the shape catches pointer events is set at the top of the inspector, next to Selectable. Most shapes show a Raycast Target checkbox. A shape whose Selectable lives on a different UI Shape, such as a child checkmark, shows a Raycast Mode dropdown instead:

Hit-testing matches the shape you see, not its bounding rectangle. Rounded, squircle and octagonal corners, slant and taper are all accounted for, so a click just outside a corner falls through to whatever's behind. Drop shadow and glow aren't clickable.

What the shape draws decides whether it catches clicks. Fill, Texture and Background Blur cover the shape's area, so any one of them makes it catch clicks, the way an Image does.

Outline, Inner Shadow and Bevel only draw near the edges, so on their own they catch nothing: a frame or a highlight drawn over your interface never blocks the controls underneath. A shape with a Selectable is the exception. A control has to be clickable everywhere it is shown, so it catches clicks whatever it draws, even when that is only an outline or a look that appears on hover.

This applies to the shape itself only. Children keep their own pointer behavior, so turning Raycast Target off makes the shape click-through without affecting anything parented under it.

Interactive Controls

A UI Shape can be the whole look of a Unity control, so a button, a slider or a dropdown needs no sprites at all. Point the Selectable field at a Button, Toggle, Slider, Scrollbar, Dropdown or Input Field and the shape takes over its visuals.

They all work the same way: the shape restyles itself as you hover, press, check and disable the control, with no sprite swaps. Control Types below covers what's specific to each, and Text Transitions carries the same states to the control's labels.

Setting Up States

1. Assign a Selectable to the Selectable field, or click Add... to add and assign one in a single step.
2. Tabs appear: Normal · Highlighted · Pressed · Selected · Disabled. Normal is the shape's main setup; the others override it.
3. On a state tab, tick the checkbox next to any property to change it there. Unticked properties follow Normal, and unticking one snaps it back. A module's header checkbox is an override too, so you can switch a whole effect on or off for one state.
4. Set Transition Duration to cross-fade between states. 0 is instant, and fades use unscaled time, so they keep running while the game is paused.

The selected tab is also the live preview, and an orange bar in the left gutter marks everything that differs from Normal, like Unity's prefab override lines. Previews are never saved.

Assigning a Selectable sets its Transition to None and turns Raycast Target on. Assigning one you already have, with the picker or by drag and drop, leaves its Navigation as you have it. Controls created from the GameObject > UI menu or the Add... button have their Navigation set to None.

Precedence matches Unity's: Disabled > Pressed > Selected > Highlighted > Normal.

Moving States

The Transform module lets a state move, turn and resize the shape, so a button can sink a little when pressed or grow under the pointer. It appears once a Selectable is assigned.

All three are changes on top of the Rect Transform, not replacements for it, so you can move or lay out the shape later and every state still works. That's why they're read-only on the Normal tab: Normal is whatever the Rect Transform already holds. They cross-fade with the rest of the look over Transition Duration, and anything parented to the shape, like a button's label, moves with it.

Control Types

Every control below drives its states through the same tabs. What changes is which parts you get to style, and where each one's states come from.

A control's sub-parts, like a slider handle or a dropdown arrow, share the control's Selectable. They light up together with it, across its whole area, using the Follow raycast mode.

This works in your own layouts too. Give several shapes the same Selectable, such as a background and a separate icon, and they change state together across the whole button. It holds even when the Selectable sits on a plain parent object rather than on a UI Shape, which is common when a button prefab keeps its Button on an empty root.

Button

The shape itself is the button. Nothing else to wire up.

Toggle

A Toggle adds an Off | On bar above the state tabs, so the unchecked and checked looks are authored separately. Off/Normal is the base; On/Normal is the checked resting look.

An On state falls back to On/Normal, then to the matching Off state, then to the base, so you only override what actually differs when checked. Checking cross-fades with the same Transition Duration, including changes made from code or by a Toggle Group.

Adding a Toggle also creates a child Checkmark shape driven by the same Toggle. That's the pattern for any shape checkmark: give the child the same Toggle as its Selectable and author its On and Off looks.

Slider

The track, the Fill and the Handle are three separate shapes, each with its own effects and state looks. Style the handle on its own to make it stand out on hover.

Scrollbar

Same split as the Slider: a track shape and a Handle shape. Unity resizes the handle to match how much content fits, so leave its length to the Scrollbar and style the rest.

Dropdown

The closed control and the drop-down list are separate hierarchies. The list's Template and its Viewport are ordinary shapes, and each row carries its own Toggle, so a row has the full Off and On columns: On is the currently chosen option.

Input Field

The shape is the text box. While the field has focus it sits in the Selected state, which is where a focus ring or a brighter outline goes.

Scroll View

A Scroll View has no Selectable of its own, so its background shape has no state tabs. Its scrollbars do, and its Viewport uses Soft masking, so the corner radius you give the viewport is the shape the content clips to.

Text Transitions

When a button inverts its fill on hover, its label often needs to change with it to stay readable. Text Transitions applies the shape's states to the TextMeshPro labels on it and beneath it. It sits at the bottom of the inspector, once a Selectable is assigned.

Each label gets its own module there, appearing and disappearing as you add and remove labels.

Color, font style and spacing are the label's actual values: a state sets what the label is, and the Normal tab shows what it already holds. Offset, Rotation and Scale work like the shape's own Transform settings instead, as changes on top of the label's Rect Transform, so you can still move or lay the label out afterwards and every state keeps working.

Text Color, Offset, Rotation and Scale cross-fade with the shape over Transition Duration. Font Style and Spacing snap instead, because changing either makes the label lay itself out again, which is fine once per state change but too expensive every frame of a fade.

Reusable Styles

Any tab, Normal or a state, can save its settings as a style asset and load them onto other shapes. The Style field at the top of each tab is the picker.

• Save Style writes the current tab to a .asset file and loads it.
• Assigning an existing style applies its settings to that tab.
• While a style is loaded, editing the tab updates the asset automatically, and every other shape using it updates live. Editing the asset in its own inspector does the same.
• Unload (or clearing the field) keeps the current values but stops syncing.
• Create an empty style with Assets ▸ Create ▸ UI Shapes ▸ Style.

A style saved from Normal is a complete look, so loading it onto a state tab overrides every property there. A style saved from a state tab stores only that state's overrides. Load it onto another button and it changes just those properties, leaving the rest to follow that button's own Normal. That's what makes one shared hover or pressed style work across buttons that look nothing alike.

Styles are an authoring tool. The link between a shape and its style is an editor one, so it costs nothing in a build and deleting a style asset never breaks a shape. To swap looks at runtime, keep a reference to the asset and call shape.ApplyStyle(asset), which copies its settings across without changing the asset.

Animation & Scripting

Every setting is a plain serialized field, so the Animator can drive it directly: corner radius, colors, shadow distance, anything. Animated values sit under state overrides, so animation drives the base look and states override on top.

From code, every setting is a property in the PrizmGames.UIShapes namespace. Set one and the shape updates itself, with nothing else to call:

using PrizmGames.UIShapes;

var shape = GetComponent<UIShape>();
shape.CornerRadius      = 24f;
shape.FillColor         = Color.white;
shape.Glow              = true;
shape.DropShadowOpacity = 0.6f;
shape.BorderMode        = BorderMode.Round;
shape.CornerStyle       = CornerStyle.Squircle;

shape.Progress          = true;      // radial timer
shape.ProgressAmount    = timeLeft / duration;

Each property is named after the field it matches in the inspector, and your IDE shows the same description as the tooltip.

From code you change how the shape looks now. The per-state looks a Selectable drives are authoring data: build those on the state tabs, or in a style asset, and they blend on top of whatever you set.

Cost of Setting Properties

Two things are free, so you can write the straightforward code:

• Setting a value the shape already has does nothing. Assigning the same color every frame costs nothing, so you don't need to check first.
• Setting many properties in one frame costs no more than setting one. The shape redraws once, after your code has finished.

Performance & Platforms

Each enabled effect draws one quad in a single pass, and effects of the same kind batch together across the whole canvas. However many shapes a canvas holds, it costs at most one draw call per kind of effect in use. There are no blur passes, no render textures and no per-frame memory churn.

PC and Console

On PC, Mac, PlayStation and Xbox, UI Shapes is not a budget item. Every effect is too cheap to time reliably there, and that holds when you stack effects on a shape or fill a screen with shapes. Even Background Blur, the one effect worth thinking about on mobile, disappears into the noise at every quality setting.

Design for looks first. The charts below are for mobile and Switch, on a deliberately unforgiving scale. An orange bar means "the most expensive thing in this asset", not "expensive".

Overall Impact

Typical UI built with UI Shapes, as a share of a frame's GPU budget. Here the full track is the whole frame, so short bars are the point:

Mobile and Switch have real budgets, so the rest of this section is written for them. The guidance is simple, and following it costs you nothing visually.

• The thing to budget is painted area: transparent UI doesn't occlude, so every effect quad costs its full on-screen size whether it ends up visible or buried.
• Shadow and glow Radius directly sets how many pixels the effect covers. Prefer proportionate radii over full-screen glows, especially in long scrolling lists.
• Put shadows on containers rather than on every element inside them.
• Keep effect-heavy UI on its own Canvas, which is good uGUI practice anyway.
• Soft-masked scroll views cull rows that scroll out of view, so long lists stay cheap.
• A Simple mask paints its own area once more than a Soft one, to carve the shape children clip to. On a full-screen mask that is worth knowing.

Cost Per Effect

Relative GPU cost of each effect on its own, on a mobile-class GPU:

Bevel is the heaviest of the ordinary effects, because it draws two quads: a highlight and a shadow. Drop Shadow and Inner Shadow cost in proportion to their Radius, so read them as one band rather than a ranking. A shape with both Fill and Inner Shadow costs less than the two bars added together, because the two are drawn as one. Glow is the cheapest of the soft effects: per pixel it costs about the same as a plain Fill, though it still covers more ground as its Radius grows. Everything below Bevel is cheap enough to use freely at ordinary button and card sizes, even on mobile.

Skewed Shapes

Slanting a shape is free. The slant is built into the shape's geometry, so it draws at the same cost as the upright version and the chart above applies to it unchanged.

A Mirrored or Custom slant costs a little even with the setting off, because the shape narrows across its width. A Parallel slant is free either way.

Budgeting Background Blur

Blur is the one effect that can dominate a mobile frame. On PC and console it's free in practice, but on a mobile-class GPU, Switch included, a large panel can cost more than every other effect combined. Your levers, in order of impact:

• Quality, per shape. High costs several times Medium, and Medium a few times Low. Both Medium and Low still read as a proper blur, so start at Low or Medium on mobile and raise it only if you can see the difference in context.
• Capture Resolution on URP's Renderer Feature. Half looks all but identical to Full, and Quarter is cheaper still and fine for large radii.
• The panel's on-screen size. Prefer a few large panels over many small ones.

Blur suits menus and dialogs on any platform. Budget it before putting it on a permanent HUD.

Stacking Effects

On the same scale as the chart above:

Effects add up, plus a little: six on one shape cost about half again as much as the same six spread out, because each is another transparent layer over the same pixels. Two effects on many elements is cheaper than six on a few.

Many Shapes

The count of shapes is rarely the problem. The total area your effects paint almost always is. A drop shadow on every row of a long list is the classic way to run out of budget on mobile; the same shadow on the list container costs a fraction of it.

Platform Notes

• Mobile. Supported on GLES 3.0+, Metal and Vulkan. Cost scales with painted area, so ordinary buttons and cards are cheap and full-screen panels are the thing to watch.
• Consoles. No platform-specific code; the shaders compile through Unity's standard pipeline for every target. PlayStation and Xbox are desktop-class, so use what looks right. Switch behaves like a mid-range mobile GPU, so follow the mobile guidance there.
• VR. Works with Single Pass Instanced rendering. Unity doesn't render Screen Space – Overlay canvases in VR at all, so use World Space or Screen Space – Camera. Background Blur isn't supported in VR.
• Builds. The component references its shaders directly, so they're always included. There's no Always Included Shaders or Resources setup to do.

Troubleshooting

Using UI Shapes as a UPM Package

The UI Shapes folder is also a UPM package (com.prizmgames.uishapes). To reference it from another project, add this to that project's Packages/manifest.json:

"com.prizmgames.uishapes": "file:../path/to/UI Shapes/Assets/UI Shapes"

Contact & Support

Questions, bug reports and feature requests are all welcome. Email support@prizmgames.net.

For a bug report, please include your Unity version, the render pipeline you're using (Built-in, URP or HDRP), the UI Shapes version, and the steps to reproduce the problem. A screenshot or a small repro scene helps a lot.