Fill Color Filter Component
Overview
This component can fill a UI element with a solid color or a simple gradient of colors.
WebGL Demo
Properties
| Property | Type | Range | Default | Description |
|---|---|---|---|---|
| Fill | ||||
| Mode | Enum | Solid | The fill mode to use. Options are: • Solid: A single solid color.• Horizontal: A gradient from ColorA on the left edge to ColorB on the right edge.• Vertical: A gradient from ColorA on the top edge to ColorB on the bottom edge.• Corners: Four colors at each of the corners of the rectangle, creating a gradient fill effect. | |
| Color | Color | Red | The color of the fill in Solid mode. | |
| ColorA | Color | Red | The color of the left edge in Horizontal mode, and the top edge in Vertical mode. | |
| ColorB | Color | Blue | The color of the right edge in Horizontal mode, and the bottom edge in Vertical mode. | |
| ColorTL | Color | Red | The color of top-left corner in Corners mode. | |
| ColorTR | Color | Green | The color of top-right corner in Corners mode. | |
| ColorBL | Color | Blue | The color of bottom-left corner in Corners mode. | |
| ColorBR | Color | Magenta | The color of bottom-right corner in Corners mode. | |
| Color Scale | Float | 1.0 | Used to scale the positions of the edge/corner colors in Horizontal/Vertical/Corners mode. Higher values move the colors towards the center of the rectangle. | |
| Color Bias | Float | [-1..1] | 0.0 | Used to bias the position of the edge colors in Horizontal/Vertical mode. |
| Area | ||||
| Fill Space | Enum | Geometry | Options are: • Geometry: The gradient position is relative to the Graphic geometry.• Screen: The gradient position is relative to screen-space. | |
| Apply | ||||
| Blend Mode | Enum | Blend | The blending mode to apply the gradient to the original Graphic. Options are:• Replace• Blend• Over• Under• Mask• Clear• Darken• Multiply• Color Burn• Linear Burn• Lighten• Screen• Color Dodge• Linear Dodge• Overlay• Soft Light• Hard Light• Vivid Light• Linear Light• Pin Light• Hard Mix• Difference• Exclusive• Subtract• Divide | |
| Blend Mode Force Gamma Space | Bool | False | Whether to force blend operations in happen gamma-space to match the default in software such as PhotoShop. Otherwise blend operations happen in the active color-space. | |
| Strength | Float | [0..1] | 1.0 | Strength of the effect. |
| Render Space | Enum | Canvas | Which coordinate system use when rendering this filter. Options are: • Canvas: Render the filter before any transforms (scale/rotation/translation etc) are applied.• Screen: Render the filter after transforms have been applied.Read more about this property here. |
Usage
Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc). The object will now render with a shadow.
Usage with TextMeshPro
To use this filter effect with TextMeshPro - Text (UI) use the Filter Stack (TextMeshPro) component.