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.

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:

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

How to add Custom CSS to your message elements

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

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

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 (like colors, borders, 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 element	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)