ben/Squiggleverse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor background gradients for improved visual consistency and depth

Browse Source
This commit is contained in:
ben
2026-07-09 16:28:48 -07:00
parent 608a9b30ba
commit 848027209d
1 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+6 -7
View File
@@ -73,9 +73,8 @@ a {
radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.1), transparent 23rem),
radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.13), transparent 35rem),
radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.12), transparent 34rem),
radial-gradient(ellipse at 50% 78%, rgba(120, 0, 198, 0.26), transparent 36rem),
radial-gradient(ellipse at 50% 96%, rgba(92, 0, 154, 0.2), transparent 42rem),
linear-gradient(180deg, #020007 0%, #03000a 30%, #060011 56%, #120023 78%, #05000c 100%);
linear-gradient(180deg, transparent 0 47%, rgba(83, 0, 142, 0.12) 61%, rgba(123, 0, 190, 0.22) 78%, rgba(35, 0, 72, 0.1) 100%),
linear-gradient(180deg, #020007 0%, #03000a 30%, #060011 55%, #120023 82%, #05000c 100%);
}
.space-backdrop::before {
@@ -85,7 +84,7 @@ a {
background:
radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.08), transparent 28rem),
radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.07), transparent 24rem),
radial-gradient(ellipse at 50% 82%, rgba(113, 0, 178, 0.2), transparent 35rem);
linear-gradient(180deg, transparent 0 48%, rgba(95, 0, 161, 0.08) 62%, rgba(130, 0, 196, 0.16) 80%, rgba(42, 0, 91, 0.06) 100%);
filter: blur(18px);
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0);
will-change: transform;
@@ -313,15 +312,15 @@ a {
radial-gradient(circle at 50% -4%, rgba(170, 132, 232, 0.1), transparent 17rem),
radial-gradient(ellipse at 6% 42%, rgba(76, 10, 130, 0.11), transparent 18rem),
radial-gradient(ellipse at 94% 48%, rgba(56, 5, 107, 0.1), transparent 19rem),
radial-gradient(ellipse at 50% 86%, rgba(89, 0, 151, 0.16), transparent 27rem),
linear-gradient(180deg, #020007 0%, #03000a 30%, #060011 58%, #0d001d 82%, #020007 100%);
linear-gradient(180deg, transparent 0 46%, rgba(74, 0, 128, 0.1) 60%, rgba(116, 0, 181, 0.2) 78%, rgba(28, 0, 62, 0.08) 100%),
linear-gradient(180deg, #020007 0%, #03000a 30%, #060011 56%, #110022 82%, #04000a 100%);
}
.space-backdrop::before {
background:
radial-gradient(ellipse at 8% 32%, rgba(95, 35, 154, 0.08), transparent 18rem),
radial-gradient(ellipse at 92% 34%, rgba(82, 38, 145, 0.07), transparent 17rem),
radial-gradient(ellipse at 52% 86%, rgba(102, 0, 176, 0.12), transparent 25rem);
linear-gradient(180deg, transparent 0 50%, rgba(92, 0, 155, 0.07) 64%, rgba(128, 0, 194, 0.14) 82%, rgba(36, 0, 82, 0.05) 100%);
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.12), 0);
}