> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/properties/effects/color-overlay.md).
# Color Overlay
The **Color Overlay** effect fills a layer's visible pixels with a color, on top of the source art. Transparent areas of the layer stay transparent, so the overlay follows the exact shape of the art.
Use Color Overlay for hit flashes, tinted states, locked or inactive items, and silhouettes, without exporting a recolored copy of the asset for every state.
***
#### Adding a Color Overlay Effect
Add a Color Overlay effect from the **Effects** section of the layer's Properties Panel, the same way as any other effect. See [Effects](/play/properties/effects.md) for the full add, configure, and remove flow.
The Color Overlay effect has a single setting: a color input with a swatch, hex value, and opacity percentage. Click the swatch to open the color picker.
A new Color Overlay starts as **#FFFFFF at 100%**, which turns the layer into a solid white silhouette. Pick a color or lower the opacity to bring the art back.
***
#### Solid Colors and Gradients
The color input accepts a solid color or a gradient. See [Color Selector](/play/general/color-selector.md) for how to build a gradient.
Gradients map to the layer itself, so they rotate and stretch with the layer as you transform or animate it.
***
#### How Opacity Controls the Overlay
The color's opacity sets how strongly the overlay covers the art.
* **At 100%**, the overlay is solid. The layer renders as a flat silhouette in the chosen color.
* **Below 100%**, the color tints the art, and the original art shows through proportionally.
* **At 0%**, the overlay has no visible effect.
{% hint style="info" %}
*For a gradient, each color stop's opacity applies on its own. A gradient that fades from 100% to 0% gives a silhouette on one side and the untouched art on the other.*
{% endhint %}
***
#### Layer Types
Color Overlay works on images, text, shapes, sequences and videos. On text layers, only the rendered text is recolored.
***
#### How Color Overlay Combines
* **Opacity effect.** An Opacity effect on the same layer fades the recolored result as a whole.
* **Press Effect.** A Press Effect's color overlay is a separate setting. When the layer is pressed, its tint sits on top of the Color Overlay effect and combines with it instead of replacing it.
* **Animations.** The overlay moves, scales and rotates with the layer through all of its animations.
* **Color Underlay.** A layer can hold a Color Overlay and a [Color Underlay](/play/properties/effects/color-underlay.md) at the same time. The overlay recolors the art; the underlay sits behind it.
* **Blend Mode.** With a [Blend Mode](/play/properties/effects/blend-mode.md) effect on the same layer, the recolored layer blends with what's beneath it.
{% hint style="warning" %}
*A layer can hold one Color Overlay effect. To change the color, edit the existing effect instead of adding a second one.*
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://help.craftsmanplus.com/play/properties/effects/color-overlay.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
