add grain to gradients

src/lib/components/Footer.svelte

@@ -106,6 +106,8 @@
 		width: 100%;
 		height: 900px;
 		z-index: -10;
-		background: radial-gradient(105vw 450px at 50% 50%, theme(colors.blue.600 / 80%), transparent);
+		mask-image: radial-gradient(105vw 450px at 50% 50%, rgba(0, 0, 0, 1) 50%, transparent);
+		background: url('imgs/grain.webp'),
+			radial-gradient(105vw 450px at 50% 50%, theme(colors.blue.600 / 80%), transparent);
 	}
 </style>

src/routes/HeroBackground.svelte

@@ -199,12 +199,22 @@
 	}
 
 	.top-light {
-		background: radial-gradient(
+		background: url('imgs/grain.webp'),
+			radial-gradient(
+				100% 80% at top,
+				theme(colors.cyan.500 / 50%) 0%,
+				theme(colors.sky.500 / 20%),
+				transparent
+			);
+
+		mask-image: radial-gradient(
 			100% 80% at top,
-			theme(colors.cyan.500 / 50%) 0%,
-			theme(colors.sky.500 / 20%),
+			white,
+			rgba(0, 0, 0, 1),
+			rgba(0, 0, 0, 1),
 			transparent
 		);
+
 		width: 100%;
 		height: 100%;
 		position: absolute;

src/routes/PreviewRiceSlice.svelte

@@ -140,10 +140,15 @@
 		width: 1100px;
 		height: 200%;
 
-		background-image: radial-gradient(
+		background-image: url('imgs/grain.webp'),
+			radial-gradient(closest-side, theme(colors.sky.500), theme(colors.indigo.500 / 0%));
+
+		mask-image: radial-gradient(
 			closest-side,
-			theme(colors.sky.500),
-			theme(colors.indigo.500 / 0%)
+			white,
+			rgba(0, 0, 0, 1),
+			rgba(0, 0, 0, 1) 90%,
+			transparent
 		);
 	}
 </style>

src/routes/WallOfFameSlice.svelte

@@ -58,8 +58,10 @@
 		width: 200vw;
 		max-width: 2400px;
 		max-height: 1000px;
-		background: radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent),
+		background: url('imgs/grain.webp'),
+			radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent),
 			radial-gradient(15% 20%, theme(colors.cyan.500 / 70%), transparent);
+		mask-image: radial-gradient(closest-side, white, rgba(0, 0, 0, 0.8) 70%, transparent);
 	}
 
 	.glow {
@@ -72,11 +74,13 @@
 		left: 0;
 		right: 0;
 		pointer-events: none;
-		background-image: radial-gradient(
-			ellipse at bottom,
-			theme(colors.pink.400),
-			theme(colors.indigo.700 / 50%) 50%,
-			theme(colors.indigo.950 / 0%) 80%
-		);
+		background-image: url('imgs/grain.webp'),
+			radial-gradient(
+				ellipse at bottom,
+				theme(colors.pink.400),
+				theme(colors.indigo.700 / 50%) 50%,
+				theme(colors.indigo.950 / 0%) 80%
+			);
+		mask-image: radial-gradient(ellipse at bottom, white, rgba(0, 0, 0, 1) 90%, transparent);
 	}
 </style>

src/routes/wall_of_fame/+page.svelte

@@ -37,6 +37,7 @@
 				{/each}
 			</div>
 		</div>
+		<div class="gradient_" />
 		<Title>
 			<span slot="title" class="title">Wall of fame</span>
 			<div slot="subtitle" class="max-w-[40ch]">
@@ -143,7 +144,15 @@
 		max-height: 900px;
 		width: 100%;
 		margin-bottom: min(-10vh, -6rem);
-		background: radial-gradient(70% 50% at 50% 0%, theme(colors.cyan.500 / 50%), transparent);
+	}
+
+	.gradient_ {
+		position: absolute;
+		inset: 0;
+		z-index: -1000;
+		mask-image: radial-gradient(70% 50% at 50% 0%, white 70%, transparent);
+		background: url('imgs/grain.webp'),
+			radial-gradient(70% 50% at 50% 0%, theme(colors.cyan.500 / 40%), transparent);
 	}
 
 	.japanese {

src/routes/wall_of_fame/Contest.svelte

@@ -101,7 +101,8 @@
 		width: 100%;
 		height: 1000px;
 		z-index: -10;
-		background: radial-gradient(140px 100px at 50% 45%, var(--color), transparent),
+		background: url('imgs/grain.webp'),
+			radial-gradient(140px 100px at 50% 45%, var(--color), transparent),
 			radial-gradient(145px 110px at 50% 45%, var(--c1), transparent),
 			radial-gradient(210px 140px, var(--c2, theme(colors.blue.600)), transparent),
 			radial-gradient(300px 200px, var(--c2, theme(colors.sky.600)), transparent),

src/routes/wall_of_fame/FamedRice.svelte

@@ -54,6 +54,7 @@
 			alt={`${name} by ${creator} thumbnail`}
 			loading="lazy"
 		/>
+		<div class="grain_" />
 	</div>
 </div>
 
@@ -110,4 +111,18 @@
 
 		mask-image: radial-gradient(farthest-side, black, transparent);
 	}
+	.grain_ {
+		position: absolute;
+		min-width: calc(120% + 200px);
+		height: calc(120% + 200px);
+		top: -45%;
+		left: 50%;
+		translate: -50%;
+		z-index: -5;
+		contain: layout size style paint;
+
+		background-blend-mode: hard-light;
+		mask-image: radial-gradient(farthest-side, black 50%, transparent);
+		background-image: url('imgs/grain.webp');
+	}
 </style>