Have you noticed that your uploaded banner image appears slightly darker on your academy's homepage than the original file? You may be curious about the darker, shadow-like effect that covers the banner image in the New Experience interface.
What’s Happening
In the New Experience, a subtle gradient overlay is automatically applied to banner images at the top of the page. This overlay creates a soft shadow effect that enhances the overall appearance of the page. Academy admins can also choose whether this gradient appears — see "Turning the Gradient On or Off"
below.
Why the Gradient Overlay Is Used
This design choice serves two key purposes:
- Optimizing Text Readability: The gradient is a deliberate design feature. Its primary function is to ensure text and other elements (like navigation links or the title) remain clearly readable over various image colors and brightness levels. Without this darker overlay, light-colored text could disappear on a bright banner image, creating a poor user experience.
- Design Consistency: By applying this feature to all banner images, the platform maintains a clean, professional, and cohesive visual experience across all academies using the New Experience.
If you turn the gradient off, keep readability in mind. Make sure your banner image still provides enough
contrast for the workspace and page titles to stay legible on their own.
Turning the Gradient On or Off
You're not limited to the default gradient behavior. Under Academy Workspace > Academy Admin >
Configuration > General > Academy Branding, the Header display section includes a Hide banner gradient toggle.
• Turn it on to hide the decorative gradient from behind the workspace and page titles.
• Leave it off (the default) to keep the gradient applied, as described above.
In Summary
Your original banner image hasn’t been altered or modified in any way. The darker appearance is simply the result of this built-in overlay, which is designed to enhance readability and provide a consistent visual experience across the platform. If you'd prefer a flat banner without the shadow effect, you can turn it off at any
time using the Hide banner gradient toggle in your Academy Branding settings.
Related articles: