Gradient Overlay on Banner Images

Overview

If your banner image looks slightly darker on your academy homepage than the original file, this is expected.

In the New Experience interface, a subtle gradient overlay appears automatically at the top of the page. This overlay creates a soft shadow effect over the banner image.

What’s happening

The New Experience applies a built-in gradient overlay to all banner images.

This overlay slightly darkens the image to support page design and usability. The original image file is not changed or modified.

Why the gradient overlay is used

The gradient serves two important purposes:

  • Improve text readability:
    The overlay helps ensure that titles, navigation links, and other page elements remain easy to read. Without this darker layer, light text could blend into bright areas of an image. This can reduce clarity and impact the user experience.
  • Maintain visual consistency:
    The overlay is applied to all banner images in the New Experience. This creates a clean, professional, and consistent look across academies.

In summary

Your original banner image remains unchanged.

The darker appearance is the result of a built-in gradient overlay designed to improve readability and maintain a consistent visual experience across the platform.

Related articles:

Configure Academy Branding

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