Rounded corners, gradients, shadows, glow, outline, bevel, blur and more!
Easy to use for designers and artists.
Batched, scriptable, animatable and mobile friendly.✨ One component. Every UI effect. Easy to use. ✨EffectsFillTextureDrop ShadowInner ShadowGlowOutlineBevelBackground BlurMix them freely on each single element. Every effect has its own colour (or gradient), opacity and blend mode.Try out the effects in your browser:🚀 Web DemoShapesSharp, Rounded and Octagonal corners, or the famous Squircle shapeSkew and taper into slants, trapezoids and trianglesProgress, linear or radial, for health bars or timersMaskingSoft masking uses the real silhouette, corners, chamfer and skew includedAnti-aliased edges (no jagged lines or curves)Masks all child shapes, Images, RawImages and TextMeshProPadding and Softness settings for all 4 sidesCulling: Automatically draws only elements that are visible on screenAlso supports Unity's Mask or RectMask2D via Simple masking modeInteractive ControlsFull support for Buttons, Toggles, Sliders, Dropdowns, Input Fields & Scroll ViewsTabs for Highlighted/Pressed/Selected/Deactivated states, previewed live in the Scene view. Override just what should change and set a cross fade duration.Easily animate child texts as well.Easy to useAdd UI Shape to any UI GameObject, or use GameObject → UI → UI ShapeSwitch on the effects you want. Each one is a collapsible module with its enable checkbox in the header.Click Add... to make it interactive, and style each state on its own tab.Ready for productionAnimator ready and fully scriptable from C#Reusable style assets: save a look once, load it anywhere, edit it live.Effects of the same kind batch across the whole canvas, so busy screens stay at a handful of draw calls.Mobile performance has been benchmarked and optimized on real Android hardware and holds up well.DemoIncludes a demo scene with example UI elements.Documentationhttps://prizmgames.net/UIShapes/Manual.htmlThe full PDF manual also ships inside the package under UI Shapes/Documentation.Third Party LicensesAsset uses TMP_SDF-Mobile shader under Unity Companion License; Fast Rounded Rectangle Shadows under MIT License;The TextMeshPro clipping shader is derived from Unity's own TMP_SDF-Mobile shader and is licensed for use with Unity engine software.See Third-Party Notices.txt file in package for details.ArchitectureOne UIShape component manages its own renderers. Effect parameters travel in vertex channels, so effects of the same kind share a static material and batch into a single draw call per canvas.Shapes are signed distance fields evaluated per fragment: resolution independent at any canvas scale and correctly anti aliased at any radius.PerformanceAllocation free runtime paths, including the per frame soft mask scan.Lazy recomposition: a shape costs CPU only on the frames it changes.Soft masked content is culled outside the mask rect, so scroll views scale with visible rows.Background Blur ships with Low, Medium and High quality settings. Fill rate guidance is documented in the manual.Profiled and optimized on physical Android hardware.CompatibilityUnity 2022.3 LTS or newer, including Unity 6Graphics: Shader Model 3.0 or better (OpenGL ES 3.0+, Metal, Vulkan, DirectX 11+).Dependencies: uGUI (com.unity.ugui). TextMeshPro is optional and supported by soft masking when present.Shaders are referenced by the component, so player builds include them automatically.Background Blur on URP uses an included renderer feature (one time setup).Supported platformsMobile: iOS and Android.Desktop: Windows, macOS and Linux.Consoles: PlayStation, Xbox and Nintendo Switch. No platform specific code.Web: WebGL.LimitationsBackground blur on URP requires adding the included UI Shapes Background Blur renderer feature to your URP renderer. Setup instructions appear in the inspector. On HDRP, setup is automatic. On Built-in, no setup is needed.On URP and HDRP, background blur captures the camera image rather than the individual panel, so UI drawn on the same canvas behind a blur panel is not blurred. Blurring UI behind UI is supported on Built-in only.Code and integrationFull C# and shader source, runtime and editorNamespace PrizmGames.UIShapes, auto referenced assembly definitions, PascalCase scripting API for every settingStyles are plain ScriptableObject assets, safe to version controlAlso consumable as a UPM package (com.prizmgames.uishapes)Documentationhttps://prizmgames.net/UIShapes/Manual.htmlI used an AI assisted development workflow to build UI Shapes.Code and shaders. The runtime, editor tooling and shader math were developed with an AI coding assistant. Every line was directed, reviewed and tested by me, and the architecture, feature set and design decisions are mine. Results were verified in the editor and profiled on real hardware before shipping.Demo scene artwork. One decorative image in the demo scenes was generated with an image model.Store text and documentation. Drafted with AI assistance, then edited by me.
