This post post was updated on 24 April 2025. Reason for update: Check to see if this issue had been addressed in WordPress 6.8.
About a month ago I noticed a problem with my WordPress gallery block images that are captioned. I’m referring to the WordPress core gallery block. I searched the internet and couldn’t find anyone complaining about this. I had to start digging around in an effort to find a solution.
I deactivated plugins and changed to a default theme. I also removed some custom CSS in my child theme referencing the gallery block. These actions did not help. Because I use the excellent Firelight Plugin (Formerly Easy Fancybox) for lightbox features, I contacted their support team at WordPress.org, thinking this plugin might be causing the issue. Their support quickly confirmed that this is “unrelated to Firelight, which is just for opening the images larger”.
Firelight support kindly provided me with some CSS to remove the blur.
Gallery Block Custom CSS Code – Remove Blur from Images
/* Remove blur effect from gallery captions site wide on frontend */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
display: none;
}This did remove the blur but left the white captions without a sufficiently dark transparent background. This meant the captions would be difficult to view even for website visitors with good eyesight.
WordPress gallery block images with blurry images
Here is an example screenshot showing the blurry images before custom CSS was applied.
In my opinion, this is not satisfactory visually or from an accessibility point of view. The default text size for the captions is 13px whether on desktop or mobile. Any text size smaller than 16px on a mobile will be noticed by Google’s crawler and this may lower ranking of the page or post in the SERPS.
This prompted me to come up with the following additional custom CSS, which I feel is satisfactory for visitors on desktops and mobile devices.
WordPress Gallery Block CSS Code to Further Style Captions
/* Larger gallery block captions on wider screens */
@media only screen and (min-width: 922px) {
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
font-size: 0.9em;
line-height: 24px;
padding: 0.5em 0.5px 0.5em 0.5px;
background: rgba(0,0,0,0.55);
}
}
/* Smaller gallery block captions on narrower screens */
@media only screen and (max-width: 922px) {
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
font-size: 0.816em;
line-height: 18px;
padding: 0.3em 0.2em 0.3em 0.2em;
background: rgba(0,0,0,0.55);
}
}The result on desktop view
The result on a narrow screen
How does it appear in the post editor?
Not nicely. In the post editor the galleries show up exactly like in my first screenshot shown above.
WordPress Gallery Block – Live example with my CSS customisation
Click on or touch an image to cycle through the gallery.
On my desktop, the image captions display with a font size of 19px while on my mobile the captions display at 16px.
Check accessibility of your web page on mobile
If you change the font size of the WordPress gallery block captions, you should check the captions display at no less than 16px on a mobile device. Your website setup may differ from mine, and you may need to adjust the font size for mobile devices. You can easily do this using a font size add-on for your browser. I use the WhatFont add-on for Firefox, and this adds a WhatFont button icon to the browser’s toolbar. The associated screenshot shows what its use looks like in the Firefox browser at a screen width of 350px.
Just Google WhatFont, followed by your browser name, to download the correct add-on for your browser.
Additional CSS Code adds a 5px radius to gallery block image thumbnails
I like my WordPress gallery block images to have a small border radius. It makes the pages look a little less boxy.
/* Add a 5px border radius to gallery block images */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
border-radius: 5px;
}I could set the 5px radius for the gallery photographs in the customiser, but with this CSS code I don’t have to remember each time I create a new gallery.
WordPress Code Block – Adjust font to show as 18px on Desktop and 16px on Mobile
On an aside, the default font size for the WordPress code block is 15px. That may be fine for website visitors on a desktop but not so accessible for mobile users. Here is my custom CSS to achieve better accessibility of the code block.
/* Adjust code block font size */
.wp-block-code code {
font-size: 0.85em;
} The blurred effect in the WordPress gallery block appears to be by design
Imagine my surprise when someone, very helpful, chipped in on my support question on the Firelight community support forum on WordPress.org with the following comment: this blur style was added to the gallery block in WordPress core. So it turns out that I am not the only one complaining about this “new feature” in the WordPress gallery block.
The commenter provided a GitHub link, where this was under discussion earlier this year.
I am no expert in following threads on GitHub. Reading through the thread, it does appear that the feature I am complaining about is indeed in the WordPress gallery block by design. I cannot tell from the thread when this was introduced into WordPress. It was certainly in a recent version. I suspect that this change came about in either WordPress 6.7 or 6.7.1. The release dates for these WordPress versions were 14 November 2024 and 21 November 2024 respectively. Source: Release Archive – WordPress.org.
WordPress gallery block instructions on WordPress.com
Updated 24 April 2025.
When I originally published this post, this “new feature” was documented in the WordPress.com gallery block instructions. That web address still works but I can no longer find a reference to the gallery captions. Here is a link to one of the screenshots that was previously linked to from the above URL, which clearly showes the image blur around and above the image caption. This image link still works but it does not appear to be linked to from the gallery block instructions link above.
The Gallery Block tested with WordPress 6.8
WordPress 6.8 was released on 15 April 2025. I wondered if this annoying “new feature” had been fixed or somehow changed. I removed all my custom CSS that I have detailed above and saved my child theme. I did a hard refresh on one of my posts with a gallery and the gallery reverted to what I am complaining about in this post. Obviously, I have reverted to my custom gallery block CSS. As WordPress 6.8 is apparently the only major core update of 2025, it looks like nothing is going to change anytime soon.
CSS Coding
Disclaimer: I am probably at an intermediate level as far as CSS coding is concerned. I do not necessarily consider the custom CSS examples above to be examples of best practices in CSS coding.
Let me know in the comments section below if you have been affected by this issue. I would love to hear from you.
Subscribe to future posts by email. No spam, just an email when a new post is published. View the posts.
Related articles in Computers and Internet. View all in this subject.
WordPress Cover Block Less Height on Mobile
Darken Image on Hover – Simple With 2 Blocks of CSS – No Plugin Required
Add Another Admin To a Facebook Page in 2024
Hi Andrzej
Thanks so much for researching this issue. I’ve been using WordPress for quite a few years now, and like you, noticed there was a ‘fuzziness’ about my images when they contained captions, after a recent WP update. At the time, I thought it was down to a conflict with another Plugin. Having painstakingly disabled them all one-by-one, it made no difference! I just couldn’t figure it out at all, so in a way, it was good to read that others were experiencing the same issue after a recent WP update. I’m amazed that this wasn’t discovered by WordPress during the testing/beta phases. Anyway, thanks to your script, this has now resolved the issue at the front end: and actually improved the look of ALL my captions. I really appreciate your expertise and making this available to the community. All the best, Steve
Hi Steve, I’m pleased the post helped with your issue. As mentioned above, I too had to go through this time-wasting debugging. Annoyingly, I couldn’t find any reference to this in any WordPress release notes. I believe this behaviour is by design. My feeling is that if it worked fine, why bother changing it. Some at WordPress thought otherwise.
Hello and thank you! I totally hate the blurriness on my gallery when I add a caption. It also happens on a regular full size picture when I put a caption on it. Unfortunately, I don’t know how to do the custom css. WordPress should have an OPTION to use or not use this!!!!!!
You can add additional CSS through the WordPress Customiser in your WordPress dashboard. Navigate to your post or page on the front end of the website and select Customise from the top toolbar. Once in the customiser select Additional CSS. Alternatively, you can create a CSS child theme and add the CSS there. Depending on the theme you are using you may find information about creating a child theme in your theme documentation.
Thank you so much for this fix!!! I cannot believe that WP would automatically embed this “blur the image if captioned” feature (useless in my opinion) in a release without the option to de-activate it. You are a life saver!
I am so pleased it helped. I am annoyed that I could not find any mention of this in the last two WordPress documentation releases, thus causing me a lot of work troubleshooting a non existent fault on my website.
Thanks Andrzej, your solution works like a charm!
Great. I’m pleased it works, Simon.
You are very welcome, Andrew. I’m pleased the post was helpful.
Thank you so much for this post. I totally hated that blurry caption, and with your code I was able to make it more visually appealing. Thanks!