forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1<div class="variable-blur-mask">
2 <div class="blur-bottom">
3 <!-- Layer 1 -->
4 <div
5 class="blur-layer layer-1"
6 style={{
7 maskImage:
8 'linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 12.5%, rgba(255,255,255,1) 25%, rgba(0,0,0,0) 37.5%)',
9 WebkitMaskImage:
10 'linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 12.5%, rgba(255,255,255,1) 25%, rgba(0,0,0,0) 37.5%)'
11 }}
12 >
13 </div>
14 <!-- Layer 2 -->
15 <div
16 class="blur-layer layer-2"
17 style={{
18 maskImage:
19 'linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 37.5%, rgba(0,0,0,0) 50%)',
20 WebkitMaskImage:
21 'linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 37.5%, rgba(0,0,0,0) 50%)'
22 }}
23 >
24 </div>
25 <!-- Layer 3 -->
26 <div
27 class="blur-layer layer-3"
28 style={{
29 maskImage:
30 'linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 37.5%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 62.5%)',
31 WebkitMaskImage:
32 'linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(255,255,255,1) 37.5%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 62.5%)'
33 }}
34 >
35 </div>
36 <!-- Layer 4 -->
37 <div
38 class="blur-layer layer-4"
39 style={{
40 maskImage:
41 'linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 62.5%, rgba(0,0,0,0) 75%)',
42 WebkitMaskImage:
43 'linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 62.5%, rgba(0,0,0,0) 75%)'
44 }}
45 >
46 </div>
47 <!-- Layer 5 -->
48 <div
49 class="blur-layer layer-5"
50 style={{
51 maskImage:
52 'linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 62.5%, rgba(255,255,255,1) 75%, rgba(0,0,0,0) 87.5%)',
53 WebkitMaskImage:
54 'linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 62.5%, rgba(255,255,255,1) 75%, rgba(0,0,0,0) 87.5%)'
55 }}
56 >
57 </div>
58 <!-- Layer 6 -->
59 <div
60 class="blur-layer layer-6"
61 style={{
62 maskImage:
63 'linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 87.5%, rgba(0,0,0,0) 100%)',
64 WebkitMaskImage:
65 'linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 87.5%, rgba(0,0,0,0) 100%)'
66 }}
67 >
68 </div>
69 <!-- Layer 7 -->
70 <div
71 class="blur-layer layer-7"
72 style={{
73 maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(255,255,255,1) 87.5%, rgba(255,255,255,1) 100%)',
74 WebkitMaskImage:
75 'linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(255,255,255,1) 87.5%, rgba(255,255,255,1) 100%)'
76 }}
77 >
78 </div>
79 <!-- Layer 8 -->
80 <div
81 class="blur-layer layer-8"
82 style={{
83 maskImage: 'linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(255,255,255,1) 100%)',
84 WebkitMaskImage: 'linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(255,255,255,1) 100%)'
85 }}
86 >
87 </div>
88 </div>
89 <slot />
90</div>
91
92<style>
93 .variable-blur-mask {
94 position: fixed;
95 top: 0;
96 left: 0;
97 width: 100%;
98 height: 4rem;
99 z-index: 99;
100 pointer-events: none;
101 }
102
103 .blur-bottom {
104 position: absolute;
105 top: 0;
106 left: 0;
107 width: 100%;
108 height: 100%;
109 pointer-events: none;
110 }
111
112 .blur-layer {
113 position: absolute;
114 top: 0;
115 left: 0;
116 width: 100%;
117 height: 100%;
118 }
119
120 .layer-1 {
121 z-index: 1;
122 backdrop-filter: blur(0.5px);
123 }
124
125 .layer-2 {
126 z-index: 2;
127 backdrop-filter: blur(1px);
128 }
129
130 .layer-3 {
131 z-index: 3;
132 backdrop-filter: blur(2px);
133 }
134
135 .layer-4 {
136 z-index: 4;
137 backdrop-filter: blur(4px);
138 }
139
140 .layer-5 {
141 z-index: 5;
142 backdrop-filter: blur(8px);
143 }
144
145 .layer-6 {
146 z-index: 6;
147 backdrop-filter: blur(16px);
148 }
149
150 .layer-7 {
151 z-index: 7;
152 backdrop-filter: blur(32px);
153 }
154
155 .layer-8 {
156 z-index: 8;
157 backdrop-filter: blur(64px);
158 }
159</style>