diff --git a/resources/css/app.css b/resources/css/app.css
index eb2ac43cfaf..80243733de6 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -22,6 +22,7 @@
 @import './tailwind-animate.css';
 
 @source inline('bg-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,150,850,925,950,{100..900..100}}');
+@source inline('bg-checkerboard-{light,dark}');
 
 @custom-variant dark (&:where(.dark, .dark *));
 
diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index 84cdc1d448f..90c615c2ecc 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -172,9 +172,8 @@
   ========================================================================== */
 
 .asset-editor {
-
     .loading {
-        @apply absolute inset-0 flex items-center justify-center rounded-sm bg-white/70;
+        @apply absolute inset-0 flex items-center justify-center rounded-sm bg-gray-800 dark:bg-gray-900;
         z-index: var(--z-index-portal);
     }
 
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 9f95efe8e51..d996abff0a6 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -333,35 +333,45 @@
 
 /* UTILITIES / DECORATION / CHECKERBOARD
 =================================================== */
-@utility bg-checkerboard {
+
+:root {
     --checkerboard-light: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%23f3f4f6'/%3E%3C/svg%3E");
-    --checkerboard-dark: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%23000000'/%3E%3C/svg%3E");
+    --checkerboard-dark: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%230a0a0a'/%3E%3C/svg%3E");
+    --checkerboard-dark-color: #1c1c1e;
+    --checkerboard-light-color: #fff;
+}
 
+@utility bg-checkerboard {
     position: relative;
-    background-color: #fff;
 
     &::before {
-        /* e.g. Asset field > Grid Mode */
         border-radius: inherit;
         content: '';
         position: absolute;
         inset: 0;
-        background-image: var(--checkerboard-light);
-        opacity: 0;
         transition: opacity 0.2s ease-in-out;
         pointer-events: none;
+        background-color: var(--checkerboard-light-color);
+        background-image: var(--checkerboard-light);
     }
 
-    &:hover::before {
-        opacity: 1;
+    .dark &::before {
+        background-color: var(--checkerboard-dark-color);
+        background-image: var(--checkerboard-dark);
     }
+}
 
-    .dark & {
-        background-color: var(--color-gray-850);
+@utility bg-checkerboard-light {
+    &::before {
+        background-color: var(--checkerboard-light-color) !important;
+        background-image: var(--checkerboard-light) !important;
+    }
+}
 
-        &::before {
-            background-image: var(--checkerboard-dark);
-        }
+@utility bg-checkerboard-dark {
+    &::before {
+        background-color: var(--checkerboard-dark-color) !important;
+        background-image: var(--checkerboard-dark) !important;
     }
 }
 
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 7b44cf3390e..deb04499e31 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -98,23 +98,33 @@
                         />
 
                         <Panel v-else :class="{ 'relative overflow-x-auto overscroll-x-contain': mode === 'table' }">
-                            <PanelHeader class="flex items-center justify-between px-1!">
+                            <PanelHeader class="flex items-center justify-between gap-2 px-1!">
                                 <Breadcrumbs
                                     v-if="!restrictFolderNavigation"
                                     :path="path"
                                     @navigated="selectFolder"
                                 />
-
-                                <Slider
-                                    v-if="mode === 'grid'"
-                                    size="sm"
-                                    class="me-2 w-24!"
-                                    variant="subtle"
-                                    v-model="gridThumbnailSize"
-                                    :min="60"
-                                    :max="300"
-                                    :step="25"
-                                />
+                                <div v-if="mode === 'grid'" class="flex items-center gap-2 mr-2">
+                                    <ui-button
+                                        inset
+                                        size="sm"
+                                        variant="ghost"
+                                        icon-only
+                                        :icon="checkerboardIcon"
+                                        v-tooltip="__('Transparency')"
+                                        :aria-label="__('Transparency')"
+                                        @click="cycleCheckerboard"
+                                    />
+                                    <Slider
+                                        size="sm"
+                                        class="w-24!"
+                                        variant="subtle"
+                                        v-model="gridThumbnailSize"
+                                        :min="60"
+                                        :max="300"
+                                        :step="25"
+                                    />
+                                </div>
                             </PanelHeader>
 
                             <Uploads
@@ -144,6 +154,8 @@
                                 :action-url="actionUrl"
                                 :thumbnail-size="gridThumbnailSize"
                                 :selected-assets="selectedAssets"
+                                :show-checkerboard="showCheckerboard"
+                                :checkerboard-mode="checkerboardMode"
                                 v-bind="sharedAssetProps"
                                 v-on="sharedAssetEvents"
                             />
@@ -204,6 +216,7 @@ import {
     ToggleItem,
 } from '@ui';
 import Breadcrumbs from './Breadcrumbs.vue';
+import useCheckerboard from '@/composables/checkerboard.js';
 
 export default {
     mixins: [HasPreferences],
@@ -261,6 +274,16 @@ export default {
         },
     },
 
+    setup() {
+        const checkerboard = useCheckerboard();
+        return {
+            showCheckerboard: checkerboard.enabled,
+            checkerboardIcon: checkerboard.icon,
+            checkerboardMode: checkerboard.mode,
+            cycleCheckerboard: checkerboard.cycle,
+        };
+    },
+
     data() {
         return {
             columns: this.initialColumns,
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 6bfb28325e9..5a965fe22ee 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -1,5 +1,5 @@
 <template>
-    <ui-card :class="{
+    <ui-card class="asset-browser-grid" :class="{
         'space-y-8': folders.length || assets.length || creatingFolder,
         '!p-0': folders.length === 0 && assets.length === 0 && !creatingFolder
     }">
@@ -102,10 +102,11 @@
                         <template #trigger>
                             <div
                                 class="asset-tile group relative bg-white dark:bg-gray-900"
-                                :class="{
-                                    'bg-checkerboard!': asset.can_be_transparent,
-                                    'opacity-50!': draggingAsset === asset.id,
-                                }"
+                                :class="[
+                                    { 'opacity-50!': draggingAsset === asset.id },
+                                    asset.can_be_transparent && showCheckerboard ? `bg-checkerboard bg-checkerboard-${checkerboardMode}` : '',
+                                    asset.can_be_transparent && !showCheckerboard ? 'bg-checkerboard before:opacity-0 hover:before:opacity-100' : '',
+                                ]"
                             >
                                 <button
                                     class="size-full"
@@ -227,6 +228,8 @@ export default {
         assets: { type: Array },
         selectedAssets: { type: Array },
         thumbnailSize: { type: Number },
+        showCheckerboard: { type: Boolean, default: false },
+        checkerboardMode: { type: String, default: 'transparent' },
     },
 
     data() {
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index cfdb821d5fc..57a3ec71038 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -38,9 +38,16 @@
                                 @completed="actionCompleted"
                                 v-slot="{ actions }"
                             >
+                                <ui-button
+                                    inset size="sm" variant="ghost"
+                                    v-if="asset.can_be_transparent"
+                                    :icon="checkerboardIcon"
+                                    class="[&_svg]:!opacity-45"
+                                    :text="__('Transparency')"
+                                    @click="cycleCheckerboard"
+                                />
                                 <ui-button inset size="sm" v-if="asset.isEditable && isImage && isFocalPointEditorEnabled" @click.prevent="openFocalPointEditor" icon="focus" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Focal Point')" />
                                 <ui-button inset size="sm" v-if="canCrop" @click.prevent="openCropEditor" icon="crop" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Crop')" />
-                                <ui-button inset size="sm" v-if="asset.can_be_transparent" @click="showCheckerboard = !showCheckerboard" icon="eye" variant="ghost" :class="[showCheckerboard ? '[&_svg]:!opacity-45' : '[&_svg]:!opacity-100']" :text="__('Transparency')" />
                                 <ui-button inset size="sm" v-if="canRunAction('rename_asset')" @click.prevent="runAction(actions, 'rename_asset')" icon="rename" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Rename')" />
                                 <ui-button inset size="sm" v-if="canRunAction('move_asset')" @click.prevent="runAction(actions, 'move_asset')" icon="move-folder" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Move to Folder')" />
                                 <ui-button inset size="sm" v-if="canRunAction('replace_asset')" @click.prevent="runAction(actions, 'replace_asset')" icon="replace" variant="ghost" class="[&_svg]:!opacity-45" :text="__('Replace')" />
@@ -69,24 +76,24 @@
                             class="flex flex-1 flex-col justify-center items-center p-8 h-full min-h-0"
                         >
                             <!-- Image -->
-                            <div v-if="asset.isImage" class="max-w-full max-h-full" :class="{ 'bg-checkerboard before:opacity-100': asset.can_be_transparent && showCheckerboard }">
+                            <div v-if="asset.isImage" class="max-w-full max-h-full" :class="{ [`bg-checkerboard bg-checkerboard-${checkerboardMode} rounded-md`]: asset.can_be_transparent && showCheckerboard }">
                                 <img :src="asset.preview" class="relative asset-thumb shadow-ui-xl max-w-full max-h-full object-contain" />
                             </div>
 
                             <!-- SVG -->
-                            <div v-else-if="asset.isSvg" class="flex h-full w-full flex-col shadow-ui-xl">
+                            <div v-else-if="asset.isSvg" class="flex h-full w-full flex-col shadow-ui-xl dark:bg-gray-800">
                                 <div class="grid grid-cols-3 gap-1">
-                                    <div class="flex items-center justify-center p-3 aspect-square" :class="{ 'bg-checkerboard before:opacity-100': showCheckerboard }">
+                                    <div class="flex items-center justify-center p-3 aspect-square" :class="{ [`bg-checkerboard bg-checkerboard-${checkerboardMode}`]: showCheckerboard }">
                                         <img :src="asset.url" class="asset-thumb relative z-10 w-4" />
                                     </div>
-                                    <div class="flex items-center justify-center p-3 aspect-square" :class="{ 'bg-checkerboard before:opacity-100': showCheckerboard }">
+                                    <div class="flex items-center justify-center p-3 aspect-square" :class="{ [`bg-checkerboard bg-checkerboard-${checkerboardMode}`]: showCheckerboard }">
                                         <img :src="asset.url" class="asset-thumb relative z-10 w-12" />
                                     </div>
-                                    <div class="flex items-center justify-center p-3 aspect-square" :class="{ 'bg-checkerboard before:opacity-100': showCheckerboard }">
+                                    <div class="flex items-center justify-center p-3 aspect-square" :class="{ [`bg-checkerboard bg-checkerboard-${checkerboardMode}`]: showCheckerboard }">
                                         <img :src="asset.url" class="asset-thumb relative z-10 w-24" />
                                     </div>
                                 </div>
-                                <div class="h-full min-h-0 mt-1 flex items-center justify-center p-3 aspect-square" :class="{ 'bg-checkerboard before:opacity-100': showCheckerboard }">
+                                <div class="h-full min-h-0 mt-1 flex items-center justify-center p-3 aspect-square" :class="{ [`bg-checkerboard bg-checkerboard-${checkerboardMode}`]: showCheckerboard }">
                                     <img :src="asset.url" class="asset-thumb relative z-10 max-h-full w-2/3 max-w-full" />
                                 </div>
                             </div>
@@ -201,9 +208,10 @@ import {
     PublishContainer,
     PublishTabs,
     Icon,
-	Stack,
+    Stack,
 } from '@ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
+import useCheckerboard from '@/composables/checkerboard.js';
 
 export default {
     emits: ['previous', 'next', 'saved', 'closed', 'action-started', 'action-completed'],
@@ -252,7 +260,6 @@ export default {
             fieldset: null,
             showFocalPointEditor: false,
             showCropEditor: false,
-            showCheckerboard: true,
             error: null,
             errors: {},
             actions: [],
@@ -292,6 +299,16 @@ export default {
         },
     },
 
+    setup() {
+        const checkerboard = useCheckerboard('editor');
+        return {
+            checkerboardMode: checkerboard.mode,
+            checkerboardIcon: checkerboard.icon,
+            showCheckerboard: checkerboard.enabled,
+            cycleCheckerboard: checkerboard.cycle,
+        };
+    },
+
     mounted() {
         this.load();
 
diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index 741b02bb70e..23a2b25a248 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -18,7 +18,11 @@
         >
         </asset-editor>
 
-        <div class="flex h-full w-full justify-center rounded-b-md relative" :class="{ 'bg-checkerboard rounded-lg!': canBeTransparent, 'border-b dark:border-gray-700': showFilename }">
+        <div class="flex h-full w-full justify-center rounded-b-md relative" :class="[
+            { 'border-b dark:border-gray-700': showFilename },
+            canBeTransparent && checkerboardMode !== 'transparent' ? `bg-checkerboard bg-checkerboard-${checkerboardMode} rounded-lg` : '',
+            canBeTransparent && checkerboardMode === 'transparent' ? `bg-checkerboard before:opacity-0 hover:before:opacity-100` : '',
+        ]">
             <div class="p-1 flex flex-col items-center justify-center h-full">
                 <!-- Solo Bard -->
                 <template v-if="isImage && isInBardField && !isInAssetBrowser">
@@ -81,6 +85,13 @@ export default {
 
     mixins: [Asset],
 
+    props: {
+        checkerboardMode: {
+            type: String,
+            default: 'transparent',
+        },
+    },
+
     computed: {
         isInAssetBrowser() {
             let vm = this;
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index b67ab6a9e65..a8c9ff7adf0 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -116,6 +116,7 @@
                                 :read-only="isReadOnly"
                                 :show-filename="config.show_filename"
                                 :show-set-alt="showSetAlt"
+                                :checkerboard-mode="checkerboardMode"
                                 @updated="assetUpdated"
                                 @removed="assetRemoved"
                                 @id-changed="idChanged(asset.id, $event)"
@@ -191,6 +192,7 @@ import { SortableList } from '../../sortable/Sortable';
 import { isEqual } from 'lodash-es';
 import { Button, Dropdown, DropdownMenu, DropdownItem, Stack } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
+import useCheckerboard from '@/composables/checkerboard.js';
 
 export default {
     components: {
@@ -210,6 +212,15 @@ export default {
 
     mixins: [Fieldtype],
 
+    setup() {
+        const checkerboard = useCheckerboard();
+        return {
+            checkerboardIcon: checkerboard.icon,
+            checkerboardMode: checkerboard.mode,
+            cycleCheckerboard: checkerboard.cycle,
+        };
+    },
+
     inject: {
         isInBardField: {
             name: 'isInBardField',
@@ -423,6 +434,13 @@ export default {
 
         internalFieldActions() {
             return [
+                {
+                    title: __('Transparency'),
+                    icon: this.checkerboardIcon,
+                    run: () => this.cycleCheckerboard(),
+                    visible: this.displayMode === 'grid' && (this.meta?.data ?? []).some((asset) => asset.can_be_transparent),
+                    quick: true,
+                },
                 {
                     title: __('Remove All'),
                     dangerous: true,
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index d6f59f950c7..6594a89e16d 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -59,7 +59,7 @@ const buttonClasses = computed(() => {
                     'bg-linear-to-b from-primary/90 to-primary hover:bg-primary-hover text-white disabled:opacity-60 disabled:text-white dark:disabled:text-white border border-primary-border shadow-ui-md inset-shadow-2xs inset-shadow-white/25 disabled:inset-shadow-none dark:disabled:inset-shadow-none [&_svg]:text-white [&_svg]:opacity-60',
                 ],
                 danger: 'bg-linear-to-b from-red-600/90 to-red-600 hover:bg-red-600/90 text-white border border-red-600 inset-shadow-xs inset-shadow-red-300 [&_svg]:text-red-200 disabled:text-white! disabled:opacity-60 disabled:inset-shadow-none',
-                filled: 'bg-gray-950/5 hover:bg-gray-950/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
+                filled: 'bg-gray-950/5 hover:bg-gray-950/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/4 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-gray-925 dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
                 subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200 [&_svg]:opacity-35',
diff --git a/resources/js/composables/checkerboard.js b/resources/js/composables/checkerboard.js
new file mode 100644
index 00000000000..b5e169b8e4e
--- /dev/null
+++ b/resources/js/composables/checkerboard.js
@@ -0,0 +1,56 @@
+import { ref, computed, watch } from 'vue';
+import { preferences } from '@api';
+
+const PREFERENCE_KEYS = {
+    listing: 'assets.browser_checkerboard_mode',
+    editor: 'assets.editor_checkerboard_mode',
+};
+
+const DEFAULT_MODE = 'transparent';
+const CHECKERBOARD_MODES = ['light', 'dark', 'transparent'];
+
+const stateByContext = {};
+
+function normalizeMode(raw) {
+    return CHECKERBOARD_MODES.includes(raw) ? raw : DEFAULT_MODE;
+}
+
+/**
+ * @param {'listing'|'editor'} [context='listing'] - 'listing' for assets fieldtype and browser grid, 'editor' for asset editor
+ */
+export default function useCheckerboard(context = 'listing') {
+    if (stateByContext[context]) {
+        return stateByContext[context];
+    }
+
+    const preferenceKey = PREFERENCE_KEYS[context];
+    const mode = ref(normalizeMode(preferences.get(preferenceKey, DEFAULT_MODE)));
+
+    watch(mode, (value) => preferences.set(preferenceKey, value === 'transparent' ? null : value));
+
+    const nextMode = computed(() => {
+        const i = CHECKERBOARD_MODES.indexOf(mode.value);
+        return CHECKERBOARD_MODES[(i >= 0 ? i + 1 : CHECKERBOARD_MODES.length) % CHECKERBOARD_MODES.length];
+    });
+
+    const enabled = computed(() => mode.value !== 'transparent');
+
+    const icon = computed(() => {
+        if (mode.value === 'light') return 'sun';
+        if (mode.value === 'dark') return 'moon';
+        return 'eye-slash';
+    });
+
+    function cycle() {
+        mode.value = nextMode.value;
+    }
+
+    stateByContext[context] = {
+        mode,
+        enabled,
+        icon,
+        cycle,
+    };
+
+    return stateByContext[context];
+}