Follow on Substack 
This post was updated on 24 April 2025. Reason for update: Check to see if this issue has been addressed in WordPress 6.8.
In November 2024, I encountered an issue with captioned images in the WordPress core gallery block. Unable to find others with the same problem online, I investigated potential solutions myself.
I methodically deactivated plugins, reverted to a default theme, and removed custom CSS targeting the gallery block in my child theme. These steps did not resolve the issue. I use the Firelight Lightbox Plugin (formerly Easy Fancybox) for lightbox functionality and contacted its support on WordPress.org, suspecting possible plugin involvement. Their team promptly clarified that the issue is unrelated to Firelight, which solely manages image enlargement.
With the plugin ruled out as the cause, the next step was to address the blur issue itself. Firelight Lightbox support provided CSS intended to eliminate the image 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;
}Applying this code removed the blur but left the white captions without a sufficiently dark transparent background, making them difficult to read 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.
This solution is unsatisfactory from both visual and accessibility perspectives. The standard caption text size in the WordPress core gallery block is 13px across all devices. On mobile devices, text smaller than 16px can be flagged by Google’s crawler, potentially lowering the page or post ranking in SERPs.
After implementing the initial styles, I created the following additional custom CSS, which is satisfactory for desktop and mobile visitors.
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 – Screenshot
The result on a narrow screen – Screenshot
Now, you may wonder how these changes appear in the post editor itself.
Not nicely. In the post editor, the galleries appear exactly as shown in my first screenshot above.
WordPress Gallery Block – Live example with my CSS customisation
Click on or tap an image to cycle through the gallery.
To summarise, after implementing the custom CSS, image captions now display at 19px on my desktop and 16px on my mobile device.
Check the accessibility of your web page on mobile
When changing the font size of WordPress gallery block captions, ensure captions display at least 16px on mobile devices. Website configurations may vary, so you may need to adjust the font size for mobile displays. This adjustment can be done easily with a browser font-size add-on. For example, the WhatFont add-on for Firefox adds a toolbar button. The accompanying screenshot demonstrates its use in Firefox 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 the gallery block image thumbnails
Applying a small border radius to gallery block images introduces softer edges and reduces the boxy appearance of pages.
/* Add a 5px border radius to gallery block images */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
border-radius: 5px;
}Instead of manually setting a 5px radius for gallery photographs in the customiser each time a new gallery is created, this CSS code automatically applies the radius.
WordPress Code Block – Adjust font to show as 18px on Desktop and 16px on Mobile
The default font size for WordPress code blocks is 15px. While sufficient on desktop, this size reduces readability on mobile devices. The following custom CSS improves accessibility for these blocks.
/* 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 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. You can view comments about this in the comments section below.
The commenter provided a GitHub link to an earlier discussion that year.
Although my experience with GitHub threads is limited, review of the linked discussion confirms that the gallery blur effect results from a deliberate change in the gallery block. The exact introduction version remains unclear, but it was present in recent releases, notably WordPress 6.7 and 6.7.1, released 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 previously linked from the above URL, which clearly shows 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 removed my custom CSS, refreshed a post with a gallery, and saw the same issue described earlier. I’ve reverted to my custom CSS. Since WordPress 6.8 is apparently the only major core update of 2025, nothing will change soon.
CSS Coding
Disclaimer: I am probably at an intermediate level in CSS coding. I do not necessarily consider the custom CSS examples above to be best-practice CSS coding.
If you have experienced this issue, please share your thoughts in the comments below.
Subscribe to future posts on this website by email. No spam, just an email when a new post is published. View the posts.
See my explainer titled “What is Substack“.
Posts in Computers and Internet. View all in this subject.
How The i-Telex System Works
The Three Tees Agency – The 2026 Reunion
Operation Azalea: The Night Poland Lost Its Telex and Phone Connections
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!