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.

Demo scenes live in UI Shapes/Demo/, one folder per pipeline, each with a full showcase scene and a Background Blur scene.

• Open the folder matching your project and delete the others. Scenes from a pipeline you don't use show pink materials.
• 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 Button or Add Toggle next to the Selectable field at the top of the inspector. See Button States.

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.

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.

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.

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.

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 MaskPadding and MaskSoftness.

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.

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.

Button States

A UI Shape can restyle itself per Selectable state, with no sprite swaps.

1. Assign your Button (or any Selectable) to Selectable, or click Add Button / Add Toggle to add and assign one in a single step. UI Shapes then takes over the visuals: it sets that Selectable's Transition and Navigation to None and turns Raycast Target on. Switch Navigation back on if you need keyboard or controller support.
2. A row of tabs appears: Normal · Highlighted · Pressed · Selected · Disabled. Normal is the shape's main setup, and the others hold per-state overrides.
3. On a state tab, tick the checkbox next to any property you want to change there. Unticked properties follow Normal, and unticking one snaps it straight back, so there's nothing to reset by hand. A module's header checkbox is itself an override, which is how you switch an effect on or off for one state.
4. Set Transition Duration (next to the Selectable field) to cross-fade between states; 0 is instant. Fades use unscaled time, so they keep working while the game is paused.

An orange bar in the left gutter marks every property, module header and tab that differs from Normal, like Unity's prefab override lines, so you can see what a state changes without opening it.

The selected tab is the live preview: the element on screen shows that state while you edit it, and switching back to Normal shows the base look. Previews are never saved.

State precedence matches Unity's Selectable: Disabled > Pressed > Selected > Highlighted > Normal.

Toggles

Assign a Toggle as the Selectable (or click Add Toggle) and an Off | On bar appears above the state tabs, so every interaction state can be authored separately for the unchecked and checked toggle.

• Off is the ordinary state model: Off/Normal is the base look, and the other Off tabs override it.
• On/Normal is the checked resting look, a set of overrides on top of the base.
• Each On state falls back to On/Normal, then to the matching Off state, then to the base. Say Off/Normal is dark gray and Off/Highlighted light gray: On/Highlighted starts out light gray. Set On/Normal's fill to green and On/Highlighted follows. Override On/Highlighted itself and it stops inheriting. The inspector always shows the resolved value.
• Checking and unchecking cross-fade with the same Transition Duration as any other state change.
• Changes from code, including SetIsOnWithoutNotify and Toggle Group (radio button) switching, are picked up automatically. There's nothing to call.

Checkmarks

Add Toggle also creates a ready-made child Checkmark UI Shape, gray when off and green when on, driven by the same Toggle, so a fresh toggle works immediately. Restyle or delete it freely.

That's the general pattern for shape checkmarks: give a child UI Shape the same Toggle as its Selectable and author its On/Off looks. Sharing the Selectable also makes the checkmark follow the parent's Highlighted, Pressed and Selected state across the whole parent, so hovering anywhere on the toggle lights the checkmark too (see Raycast Mode).

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 convenience only. Nothing reads them at runtime, so they cost nothing in a build, and deleting a style asset never breaks one.

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, everything lives in the PrizmGames.UIShapes namespace:

using PrizmGames.UIShapes;

var shape = GetComponent<UIShape>();
shape.CornerRadius   = 24f;          // properties push to the shader automatically
shape.FillColor      = Color.white;
shape.Glow           = true;
shape.ShadowOpacity  = 0.6f;
shape.SetBorderMode(UIShape.BorderMode.Round);

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

• PascalCase properties mirror the inspector fields (CornerRadius, FillColor, ShadowRadius, TextureSprite, SkewAngle and so on) and mark the shape dirty on write.
• Fill's gradient is FillGradient (the mode), FillGradientColors (a standard UnityEngine.Gradient) and FillGradientAngle. Assigning FillGradientColors copies the gradient in, so the shape never shares your instance; if you instead mutate the returned gradient in place, call shape.SetDirty().
• The two-color effects use a trio each: ShadowGradient, ShadowColor2, ShadowGradientAngle, and likewise for InnerShadow…, Glow… and Outline…. The Texture tint follows the same pattern: TextureColor, TextureGradient, TextureColor2, TextureGradientAngle, plus TextureGrayscale.
• Enum settings use a Set… method instead of a property (SetCornerStyle, SetBorderMode, SetSkewAxis, SetSkewMode, SetTextureFit, SetProgressMethod, SetProgressOrigin, SetProgressTargets), because a property would collide with the enum's own name.
• shape.CurrentState reads the active state. shape.GetStyle(state) returns an Off-column override block, and shape.GetOnStyle(state) the checked column's.
• If you set the public camelCase fields directly, call shape.SetDirty() afterwards.

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.

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. The three soft effects, Drop Shadow, Inner Shadow and Glow, cost in proportion to their Radius, so read them as one band rather than a ranking. A big glow easily outweighs a small drop shadow. Everything below Bevel is cheap enough to use freely at ordinary button and card sizes, even on mobile.

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.