# How to use the Custom CSS option in the email editor?

The **Custom CSS** option in the GetResponse Email Creator lets you add your own CSS code to personalize the look and feel of your messages beyond the standard design tools. It gives you more flexibility to fine-tune styles, spacing, and visual effects that reflect your brand’s identity.

The **Custom CSS** option is available in the **Marketer, Creator, and MAX (Enterprise)** plans. If you don’t see this option in your account, consider upgrading to access advanced customization features.

What is Custom CSS and how does it work
---------------------------------------

**Custom CSS** allows you to define your own styling rules that apply to the entire message or any message element. When you add your code in the Custom CSS element, the styles you add are loaded after (i.e., **take priority over**) the default styles that come from the editor.

You can use it to:

*   Adjust colors, fonts, and margins.
*   Override default block or button styles.
*   Add simple visual effects, such as hover states for links or rounded corners on images.

Email clients (such as Gmail, Outlook, or Apple Mail) interpret CSS differently. Some CSS properties may not render as expected.

Message styles generated by Custom CSS are **not visible** in the message preview.

How to add Custom CSS to your entire message
--------------------------------------------

To add Custom CSS to your entire message:

1.  Open your email in the message editor.
2.  Click the **Message style** in the panel on the right.
3.  Expand **Custom CSS**.
4.  In the editor window that appears, paste or type your CSS code.
5.  Click the eye icon next to the code to preview your custom CSS styles.

![](https://us-wd.gr-cdn.com/help/sites/9/2025/10/1046/ccss1.png)  

How to add Custom CSS to your message elements
----------------------------------------------

You can select any element in your message editor, like a section, button, text block, or image, and **Add Custom CSS** only to that element. To do that:

1.  Open your email in the message editor.
2.  Click on any element in your message.
3.  Use the slider to **Add Custom CSS** in the panel on the right.
4.  In the editor window that appears, paste or type your CSS code.
5.  Click the eye icon next to the code to preview your custom CSS styles.

![](https://us-wd.gr-cdn.com/help/sites/9/2025/10/1354/css.png)

When you click inside the editor and type a dot (`.`), you’ll see the unique ID of the element – for example: `.elem-image-abcdef1234 { }`.

You can use that ID to apply your custom styles.

Keep in mind that different elements may require different selectors. For instance, if you’re styling a button and want to change the text inside it, it’s better to target the text specifically, like this:

`.elem-text-216196qwerty span { }`

**Tips**
--------

*   Use _inline-safe_ properties (such as colors, borders, and padding) for better compatibility.
*   Do not include JavaScript or external files – these are not supported in emails.

Support and limitations
-----------------------

The **Custom CSS** option is intended for users familiar with HTML and CSS. Please note that the GetResponse Customer Success Team cannot assist with writing or debugging your custom code.

We recommend testing your message across multiple devices and email clients to ensure your styles render correctly.

How is Custom CSS different from the Custom Code block
------------------------------------------------------

Feature

Custom CSS

Custom Code block

**Purpose**

Adds CSS styling to the entire message or message element

Inserts custom HTML directly into the message layout

**Scope**

Affects the entire message or selected elements

Affects only the selected block

**Content allowed**

CSS only

HTML and inline CSS

**Use case**

Styling and design adjustments

Embedding custom elements (e.g., countdowns, tracking pixels)