Others

How to Remove the Default Shadow from SharePoint Image Tiles

Nimra Malik Oct 12, 2026 868 views

Question details

Users want to remove the default dark box shadow or gradient that appears on image tiles in SharePoint Online to improve the visual aesthetic of their intranet pages.

How to Remove the Default Shadow from SharePoint Image Tiles

Product: SharePoint Online
Device & OS: not provided
Scenario: Customizing the layout and visual elements of a SharePoint Online intranet site using image web parts or tiles.
Observed behavior: SharePoint automatically applies a dark shadow or gradient to the bottom of image tiles, reducing the visual quality of the image. This effect cannot be easily toggled off from the default web part menu.

Before you start

Before modifying page elements, ensure you have Edit permissions for the SharePoint site. Note that the shadow is often a built-in accessibility feature to keep overlay text readable, so removing it completely may require custom coding.

Solution 1Recommended

Adjust the Section Background Shading

In many cases, the perceived shadow effect is worsened by the section's background color. Modifying the section shading can help blend or minimize the shadow natively.

While this does not remove the built-in text-readability gradient on certain web parts, adjusting the section background is the only native SharePoint setting that can alter how the shadow blends with your page layout.

Edit the SharePoint Page

Navigate to the page containing the image tiles and click the 'Edit' button located in the top right corner of the screen.

Access Section Properties

Hover your mouse over the section containing the image tiles. A toolbar will appear on the left side. Click the 'Edit section' icon (it looks like a pencil).

Modify Background Shading

In the property pane on the right, review the 'Section background shading' options. Try selecting 'None' or testing lighter shades to see if it improves the visual quality of the image tiles.

Republish the Page

Once you have minimized the visual impact of the shadow, click the 'Republish' button at the top right to make your changes visible to site visitors.

Built-in Limitation: SharePoint Online does not currently provide a native toggle switch to disable the text-readability gradient shadow on image tiles.

Solution 2

Remove the Shadow Using Custom CSS (via SPFx)

If you need to completely remove the gradient or shadow, you must deploy a custom CSS solution using the SharePoint Framework (SPFx).

Free Microsoft Office alternative

Need a Lightweight Alternative to Microsoft 365? Try WPS Office

While you customize your SharePoint intranet online, you may also need a fast, reliable desktop suite for document creation. WPS Office is a lightweight, feature-rich alternative that lets you create stunning documents before uploading them to your SharePoint libraries.

1. Download WPS Office: Visit the official WPS website to download the free installation package for your operating system.
2. Install the Suite: Run the installer and follow the on-screen instructions to set up the software in just a few minutes.
3. Create and Upload: Create your reports, spreadsheets, and presentations in WPS Office, save them in standard Microsoft formats, and upload them directly to your SharePoint intranet.

Create and edit professional documents locally before seamlessly uploading them to your SharePoint document libraries.Strict format compatibility with Microsoft Word, Excel, and PowerPoint (.docx, .xlsx, .pptx).Lightweight installation that runs fast and smoothly, even on older hardware.Free to use with a familiar, tabbed interface that requires no steep learning curve.

Frequently Asked Questions

Why does SharePoint add a dark shadow to my image tiles?

SharePoint automatically applies a dark gradient or shadow to the bottom of certain image web parts. This is an accessibility feature designed to ensure that any overlaid text (like titles or descriptions) remains easily readable against varied image backgrounds.

Can I remove the text overlay gradient without using code?

Currently, modern SharePoint Online does not offer a native, out-of-the-box toggle to disable this default shadow. You can only attempt to minimize the visual impact by adjusting the section background shading or using images with darker bottoms.

Does changing the section background affect other web parts?

Yes. If you change the section background shading to mask the image shadow, that background color will apply to the entire section container, affecting the visual layout of all other web parts placed within that same section.

How can I safely use custom CSS in modern SharePoint?

Since the classic Script Editor web part is no longer supported on modern pages, you must use SharePoint Framework (SPFx) extensions, such as an Application Customizer, to safely and globally inject custom CSS to override default image styles.

Office Quick Solutions