Index: src/assets/css/style.css
===================================================================
--- src/assets/css/style.css	(revision 2f919c0ee3fc42d2d53fb741dbe580f4151b194d)
+++ src/assets/css/style.css	(revision 600fbf32d8b88504151b06778e4a9069d2025672)
@@ -2377,12 +2377,22 @@
 }
 
-/* Transparent covers (PNG logos etc.) sit on white everywhere so they don't blend
-   into a dark theme. Opaque covers fully cover the white — no visible change. */
+/* Transparent covers (PNG logos etc.) sit on white so they don't blend into a dark
+   theme. The white is on the IMG, so the tile's accent-gradient placeholder shows
+   while the image is still loading. */
 .post-cover img,
 .post-list-cover img,
-.grid-tile:not(.grid-tile-gradient) { background-color: #fff; }
+.grid-tile-img { background-color: #fff; }
+/* Accent-gradient placeholder shown while the cover image loads (the image fades in
+   over it), instead of a white flash on cover tiles. */
+.grid-tile:not(.grid-tile-gradient) {
+    background-image: linear-gradient(135deg,
+        color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2, var(--paper))) 0%,
+        color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%);
+}
 /* Cover as a real <img> (not background-image): browsers downsample <img> with the
-   high-quality image pipeline, so high-res line-art covers don't go jagged when shrunk. */
-.grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: blur(.4px); }
+   high-quality image pipeline, so high-res line-art covers don't go jagged when shrunk.
+   Fades in on load (.is-loading removed) so the placeholder shows meanwhile. */
+.grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: blur(.4px); transition: opacity .4s ease; }
+.grid-tile-img.is-loading { opacity: 0; }
 .grid-tile:hover { transform: scale(0.98); }
 .grid-tile-overlay {