---
title: "Add effects"
slug: "add-effects"
updated: 2026-08-17T12:39:48Z
published: 2026-08-19T08:43:52Z
canonical: "docs.grassfish.com/add-effects"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grassfish.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add effects

You can add effects to individual spot elements to make them stand out, such as shadows or borders.

To do so, perform the following steps:

1. On the HTML Composer canvas, select the element that you want to add an effect to.
2. In the **Elements** pane, click **Effects**.
3. Select a tab and specify the effect settings:

| **Background** | Select **Activate effect** and configure the following options: - **Color**: select a color or enter RGB values or a HEX code. - **Opacity**:use the arrows or enter a number to specify opacity. The default value 1.0 means full opacity. |
| --- | --- |
| **Border** | Select **Activate effect** and configure the following options: - **Color**: select a color or enter RGB values or a HEX code. - **Opacity**: use the arrows or enter a number to specify opacity. The default value 1.0 means full opacity. - **Radius**: use the arrows or enter a number to specify opacity. The default value 0 means the border is not rounded. - **Style**: select a border style from the dropdown menu. - **Width**: use the arrows or enter a number to specify border width. The default value is 0. |
| **Box shadow** | Select **Activate effect** and configure the following options: - **Color**: select a color or enter RGB values or a HEX code. - **Opacity**: use the arrows or enter a number to specify the opacity of the shadow. The default value 1.0 means full opacity. - **Angle**: use the arrows or enter a number to specify angle of the shadow. The default value is 0. - **Blur**: use the arrows or enter a number to specify how blurred the shadow is. The default value is 10. - **Distance**: use the arrows or enter a number to specify the distance of the shadow. The default value is 10. |
| **Text shadow** | Select **Activate effect** and configure the following options: - **Color**: select a color or enter RGB values or a HEX code. - **Opacity**: use the arrows or enter a number to specify the opacity of the shadow. The default value 1.0 means full opacity. - **Blur**: use the arrows or enter a number to specify how blurred the shadow is. The default value is 10. - **Vertical offset**: use the arrows or enter a number to set the downward distance of the shadow (y-axis direction). - **Horizontal offset**: use the arrows or enter a number to set the distance of the shadow to the right (x-axis direction). |
4. Click **Save** the save your changes.