Note: This feature is currently in Alpha testing. Please reach out to tiffany@knak.com if you would like to participate.
Overview
The Gradient Background Picker lets you apply CSS (Cascading Style Sheets) linear gradients directly to sections in the Knak builder.
Gradients are created with CSS instead of images. This provides several benefits:
Load backgrounds instantly.
Scale backgrounds to any screen size.
Reduce email file size.
Eliminate the need for custom code or image-based backgrounds.
Apply a Gradient Background
Open your email in the Knak editor.
Select the section or module.
Open the Background settings.
Select Gradient.
The Gradient Background Picker opens.
Create a Gradient
Open the Gradient Background Picker.
Add or edit color stops.
Adjust the gradient angle.
Preview the result.
The background updates in real time.
You can:
Add color stops.
Remove color stops.
Drag color stops to change the blend between colors.
Adjust the Gradient Angle
The angle determines the direction of the gradient. Common angles include:
Angle | Direction |
0° | Bottom to top |
90° | Left to right |
180° | Top to bottom |
Drag the angle control. You can also enter a specific value for more precise positioning.
Set an Outlook Fallback Color
Some versions of Microsoft Outlook do not support CSS gradients. When a gradient cannot be displayed, Outlook uses a solid background color instead.
Choose a fallback color to keep your design consistent.
Open the Gradient Background Picker.
Select Fallback Color.
Choose a color.
Knak automatically uses the fallback color in email clients that do not support gradients.
Recommendation: Choose a color from your gradient. This creates a more consistent experience across inboxes.
Check Text Contrast
Gradients can affect text readability, especially where colors transition. The Gradient Background Picker includes built-in contrast detection. Knak alerts you when text may be difficult to read.
This helps you:
Identify readability issues before sending.
Improve accessibility.
Deliver a better subscriber experience.
Preview in Light Mode and Dark Mode
Gradients may appear differently depending on your subscriber's display settings.
Preview your email before syncing or sending.
Switch to Light Mode.
Review your gradient.
Switch to Dark Mode.
Confirm that your design remains readable.
Best Practices
Keep Gradients Subtle
Use gradients to support your content instead of competing with it.
Recommended
Use two or three similar colors.
Blend shades of the same color.
Highlight headers or call-to-action (CTA) sections.
Avoid
High-contrast color combinations.
Applying gradients to every section.
Placing long paragraphs over complex gradients.
Always Set a Fallback Color
Not every email client supports CSS gradients.
Always choose a fallback color to maintain a polished appearance.
Use a color from your gradient whenever possible.
Check Contrast in Both Display Modes
Review every gradient in both Light Mode and Dark Mode.
Confirm that:
Text remains readable.
Important content stands out.
Color transitions do not reduce accessibility.
Test Across Email Clients
Gradient support varies between email clients.
Before sending, you should:
Set a fallback color.
Preview in Light Mode and Dark Mode.
Test across supported email clients whenever possible.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.