Fork of Chiri for Astro for my blog
style: improve gradient mask with smoother fade transition
+33
-3
+33
-3
src/components/ui/GradientMask.astro
+33
-3
src/components/ui/GradientMask.astro
···
27
27
top: 0;
28
28
left: 0;
29
29
width: 100%;
30
-
height: 1.75rem;
30
+
height: 1.5rem;
31
31
z-index: 99;
32
32
pointer-events: none;
33
33
background-color: var(--bg);
34
34
backdrop-filter: blur(1px);
35
-
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
36
-
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
35
+
mask-image: linear-gradient(
36
+
to bottom,
37
+
black 0%,
38
+
rgba(0, 0, 0, 0.738) 19%,
39
+
rgba(0, 0, 0, 0.541) 34%,
40
+
rgba(0, 0, 0, 0.382) 47%,
41
+
rgba(0, 0, 0, 0.278) 56.5%,
42
+
rgba(0, 0, 0, 0.194) 65%,
43
+
rgba(0, 0, 0, 0.126) 73%,
44
+
rgba(0, 0, 0, 0.075) 80.2%,
45
+
rgba(0, 0, 0, 0.042) 86.1%,
46
+
rgba(0, 0, 0, 0.021) 91%,
47
+
rgba(0, 0, 0, 0.008) 95.2%,
48
+
rgba(0, 0, 0, 0.002) 98.2%,
49
+
transparent 100%
50
+
);
51
+
-webkit-mask-image: linear-gradient(
52
+
to bottom,
53
+
black 0%,
54
+
rgba(0, 0, 0, 0.738) 19%,
55
+
rgba(0, 0, 0, 0.541) 34%,
56
+
rgba(0, 0, 0, 0.382) 47%,
57
+
rgba(0, 0, 0, 0.278) 56.5%,
58
+
rgba(0, 0, 0, 0.194) 65%,
59
+
rgba(0, 0, 0, 0.126) 73%,
60
+
rgba(0, 0, 0, 0.075) 80.2%,
61
+
rgba(0, 0, 0, 0.042) 86.1%,
62
+
rgba(0, 0, 0, 0.021) 91%,
63
+
rgba(0, 0, 0, 0.008) 95.2%,
64
+
rgba(0, 0, 0, 0.002) 98.2%,
65
+
transparent 100%
66
+
);
37
67
opacity: 0;
38
68
transition: background-color 0.2s ease-out;
39
69
}