Understanding the Gradient Overlay on Banner Images

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.

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.

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.

Related articles:

Customizing Your Academy's Look (Branding)

Was this article helpful?
0 out of 0 found this helpful