How to Fix SharePoint Hero Web Part Darker Top-Left Tiles
Question details
The user needs a solution or explanation for a display anomaly in the SharePoint Hero web part.
- Product
- Microsoft SharePoint
- Device & OS
- not provided
- Scenario
- Using the Hero web part in the Tiles layout with the 'Show Title' option enabled.
- Observed behavior
- The top-left tile displays darker than the other tiles, even though the source images have identical brightness and formatting.
Ensure you have Edit permissions for the affected SharePoint page so you can modify the web part layout settings.
Switch to the Layers Layout
Since the darker tile is caused by a known rendering bug specific to the Tiles layout, switching to the Layers layout acts as an immediate workaround.
The dark overlay is currently a system defect in how SharePoint renders the first block of the Tiles layout when the title text is visible. Changing the layout structure circumvents this rendering engine glitch.
Navigate to your SharePoint site and click the 'Edit' button in the top right corner of the page.
Hover your mouse over the Hero web part and click the 'Edit web part' icon (the pencil symbol) on the left side of the block.
In the property pane that appears on the right side of your screen, look under 'Layout options' and select 'Layers' instead of 'Tiles'.
Click 'Republish' or 'Save as draft' at the top of the page. The dark overlay issue will no longer affect your images.
Disable the 'Show Title' Option
If you must keep the Tiles layout, turning off the tile titles can prevent the dark gradient from being applied.
Report the Bug to Microsoft
Escalate the rendering defect to Microsoft Support to ensure their engineering team tracks and patches the bug in a future update.
Create and Share Documents Easily with WPS Office
While waiting for Microsoft to patch SharePoint web part rendering bugs, you can rely on WPS Office for seamless, bug-free document creation and team collaboration. WPS Office is a lightweight, all-in-one suite that handles your daily office tasks efficiently.
Frequently Asked Questions
Why does the top-left tile in the Hero web part look darker?
This is a known SharePoint rendering bug. When the Hero web part is set to the Tiles layout and the 'Show Title' option is enabled, the system incorrectly applies a heavier dark gradient or overlay to the first tile to make text readable, but fails to balance it with the other tiles.
Can I fix the dark tile without changing the layout?
Currently, there is no native setting to adjust the overlay opacity in the Tiles layout while keeping the title visible. Your best option is to disable the 'Show title in layout' toggle for that specific tile, which removes the dark gradient.
Will Microsoft fix this SharePoint Hero web part bug?
Microsoft continuously rolls out patches for SharePoint Online. Submitting a ticket through the Microsoft 365 Admin Center or the SharePoint Feedback Community helps prioritize this specific UI defect for upcoming service updates.
