Effects (Soft shadow / Blur / Glow) on UI elements

gilamran · December 11, 2017, 4:14pm

Hi,
Is it possible to create (Flash like) soft shadows on 2D UI elements?
I’m not looking for Text only (TextMesh Pro), but to be able to do it for buttons / images etc.

Thanks!

LiterallyJeff · December 11, 2017, 4:22pm

Currently there is only the Shadow component, which is a hard shadow. You can make your own shadows with sprites, or create a shader that will do it.

gilamran · December 11, 2017, 4:26pm

The current Shadow is hard, yea. if only I could apply blur to it…
BTW: Is there a way to see how Unity implemented it?

LiterallyJeff · December 11, 2017, 4:42pm

Luckily for you, that script is open source here:

github.com

Unity-Technologies/uGUI/blob/2019.1/UnityEngine.UI/UI/Core/VertexModifiers/Shadow.cs

using System.Collections.Generic;
using UnityEngine;

namespace UnityEngine.UI
{
    [AddComponentMenu("UI/Effects/Shadow", 14)]
    /// <summary>
    /// Adds an outline to a graphic using IVertexModifier.
    /// </summary>
    public class Shadow : BaseMeshEffect
    {
        [SerializeField]
        private Color m_EffectColor = new Color(0f, 0f, 0f, 0.5f);

        [SerializeField]
        private Vector2 m_EffectDistance = new Vector2(1f, -1f);

        [SerializeField]
        private bool m_UseGraphicAlpha = true;

This file has been truncated. show original

I wouldn’t know how to go about adding a blur to that, but there it is.

hasanbayat · March 5, 2019, 5:50am

I know it is an Old thread, but sharing this to those who are coming through search engines or such.
There are lots of great UI effects over here: GitHub - mob-sakai/UIEffect: UIEffect is an effect component for uGUI element in Unity. Let's decorate your UI with effects!

Hope this helps.
Thanks.

soumen · April 22, 2019, 1:40pm

Thanks for sharing this great asset with us…

skrishna · July 15, 2019, 6:52pm

Hem, the soft shadow feature is basically so limited that it’s useless. FYI

jasonrbrock · July 9, 2020, 6:56am

@hasanbayat ur a legend for sharing that Github address … and mob-sakai? we owe you beers.
UIEffect Drop shadow works great on 2019.4 URP

ken_unity779 · September 19, 2020, 7:20am

Another late reply…
I use multiple hard shadows with alpha decreasing with distance to create a pleasing blur-like effect. I think it works quite well with three or four shadows, but you can use as many as you like. You can also fine tune by making the first two have somewhat different colors and horizontal/vertical bias, simulating shadow cast by multiple light sources.

Topic		Replies	Views
Source for Shadow/Outline UI or a way to create custom effects? UGUI UGUI	1	4551	January 21, 2015
Soft Shadow and Rounded Corners on UI UGUI UGUI , com_unity_modules_ui	5	7155	March 22, 2019
Soft Shadow Effect on UI elements? UGUI UGUI	9	16869	December 21, 2015
How can I use Shadow on UIToolKit Component UI Toolkit UI-Toolkit	32	12598	June 15, 2026
2d, non-dynamic shadow (like photoshop layer) 2D 2D	4	1683	February 5, 2015

Effects (Soft shadow / Blur / Glow) on UI elements

Related topics