← back to Only CSS: Lanthanumcompare with ground truth →
model output
GPT-5.4
Only CSS: Lanthanum
A 0.69T 0.24
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width,initial-scale=1" />
6<title>Lantern Glow Animation</title>
7<style>
8 :root{
9 --bg:#1f3048;
10 --metal:#6f7278;
11 --metal-dark:#2a3138;
12 --metal-mid:#3a434c;
13 --glass:rgba(210,225,255,.10);
14 --glass-core:rgba(220,235,255,.18);
15 --glow:rgba(205,220,255,.42);
16 --flame1:#d84b57;
17 --flame2:#b93f4d;
18 --wick:#2b2b2b;
19 }
20
21 html,body{
22 margin:0;
23 width:100%;
24 height:100%;
25 overflow:hidden;
26 background:var(--bg);
27 }
28
29 body{
30 display:grid;
31 place-items:center;
32 font-family:system-ui,sans-serif;
33 }
34
35 .scene{
36 position:relative;
37 width:min(26vmin,220px);
38 aspect-ratio:1/1.45;
39 filter: drop-shadow(0 0 1px rgba(255,255,255,.04));
40 }
41
42 .lantern{
43 position:absolute;
44 inset:0;
45 transform:translateY(2%);
46 }
47
48 .halo{
49 position:absolute;
50 left:50%;
51 top:52%;
52 width:52%;
53 height:52%;
54 transform:translate(-50%,-50%);
55 border-radius:50%;
56 background:radial-gradient(circle, rgba(180,205,255,.18) 0%, rgba(180,205,255,.08) 28%, rgba(180,205,255,.03) 48%, rgba(180,205,255,0) 72%);
57 filter:blur(10px);
58 animation:haloPulse 1.8s ease-in-out infinite;
59 }
60
61 .handle{
62 position:absolute;
63 left:50%;
64 top:10%;
65 width:34%;
66 height:20%;
67 transform:translateX(-50%);
68 border:3px solid rgba(145,145,145,.65);
69 border-bottom:none;
70 border-radius:18px 18px 0 0;
71 box-shadow:
72 inset 0 1px 0 rgba(255,255,255,.18),
73 0 0 0 1px rgba(40,40,40,.25);
74 opacity:.95;
75 }
76
77 .cap{
78 position:absolute;
79 left:50%;
80 top:18%;
81 width:32%;
82 height:12%;
83 transform:translateX(-50%);
84 background:
85 radial-gradient(ellipse at 50% 35%, #39424a 0 58%, #202830 59% 100%);
86 border-radius:50%;
87 box-shadow:
88 0 .9vmin 0 0 #1f272f,
89 0 1.8vmin 0 -.2vmin #111920;
90 }
91
92 .glass{
93 position:absolute;
94 left:50%;
95 top:28%;
96 width:24%;
97 height:42%;
98 transform:translateX(-50%);
99 background:
100 linear-gradient(90deg,
101 rgba(255,255,255,0) 0%,
102 rgba(220,230,255,.06) 18%,
103 rgba(220,230,255,.16) 50%,
104 rgba(220,230,255,.06) 82%,
105 rgba(255,255,255,0) 100%);
106 border-radius:0 0 18px 18px / 0 0 12px 12px;
107 box-shadow:
108 inset 0 0 18px rgba(210,225,255,.08),
109 0 0 18px rgba(180,205,255,.12);
110 overflow:visible;
111 }
112
113 .glass::before{
114 content:"";
115 position:absolute;
116 inset:0;
117 background:
118 linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 30%, rgba(255,255,255,.03) 100%);
119 border-radius:inherit;
120 }
121
122 .beam{
123 position:absolute;
124 left:50%;
125 top:31%;
126 width:44%;
127 height:40%;
128 transform:translateX(-50%);
129 background:
130 linear-gradient(90deg,
131 rgba(190,205,255,0) 0%,
132 rgba(190,205,255,.08) 18%,
133 rgba(210,220,255,.18) 50%,
134 rgba(190,205,255,.08) 82%,
135 rgba(190,205,255,0) 100%);
136 filter:blur(8px);
137 border-radius:20px;
138 animation:beamPulse 1.8s ease-in-out infinite;
139 }
140
141 .base-top{
142 position:absolute;
143 left:50%;
144 top:63%;
145 width:24%;
146 height:9%;
147 transform:translateX(-50%);
148 background:
149 radial-gradient(ellipse at 50% 35%, #6f7a80 0 48%, #4f5960 60%, #3a434a 100%);
150 border-radius:50%;
151 box-shadow:0 .8vmin 1.2vmin rgba(0,0,0,.18);
152 }
153
154 .base{
155 position:absolute;
156 left:50%;
157 top:67%;
158 width:18%;
159 height:14%;
160 transform:translateX(-50%);
161 background:
162 linear-gradient(180deg, #2f363d 0%, #232930 55%, #1a1f25 100%);
163 border-radius:0 0 14px 14px / 0 0 10px 10px;
164 box-shadow:
165 inset 0 1px 0 rgba(255,255,255,.04),
166 0 10px 18px rgba(0,0,0,.18);
167 }
168
169 .base::after{
170 content:"";
171 position:absolute;
172 left:10%;
173 right:10%;
174 bottom:-10%;
175 height:28%;
176 border-radius:50%;
177 background:radial-gradient(ellipse, rgba(0,0,0,.22), rgba(0,0,0,0) 70%);
178 filter:blur(4px);
179 }
180
181 .flame-wrap{
182 position:absolute;
183 left:50%;
184 top:50%;
185 width:10%;
186 height:18%;
187 transform:translateX(-50%);
188 transform-origin:50% 100%;
189 animation:flameBob 1.8s ease-in-out infinite;
190 }
191
192 .wick{
193 position:absolute;
194 left:50%;
195 bottom:8%;
196 width:10%;
197 height:18%;
198 transform:translateX(-50%);
199 background:var(--wick);
200 border-radius:50% 50% 30% 30%;
201 opacity:.7;
202 }
203
204 .flame{
205 position:absolute;
206 left:50%;
207 bottom:12%;
208 width:100%;
209 height:78%;
210 transform:translateX(-50%);
211 background:linear-gradient(180deg,var(--flame1),var(--flame2));
212 border-radius:55% 55% 48% 48% / 72% 72% 35% 35%;
213 clip-path:polygon(50% 0%, 68% 18%, 82% 42%, 78% 68%, 62% 92%, 50% 100%, 38% 92%, 22% 68%, 18% 42%, 32% 18%);
214 filter:drop-shadow(0 0 8px rgba(216,75,87,.18));
215 animation:flameFlicker 1.8s ease-in-out infinite;
216 }
217
218 .flame::before{
219 content:"";
220 position:absolute;
221 inset:18% 24% 22% 24%;
222 background:linear-gradient(180deg, rgba(255,140,140,.18), rgba(255,255,255,0));
223 border-radius:inherit;
224 filter:blur(2px);
225 }
226
227 @keyframes flameFlicker{
228 0% { transform:translateX(-50%) scale(.92,1.02) rotate(-2deg); }
229 12% { transform:translateX(-50%) scale(1.00,.94) rotate(1deg); }
230 26% { transform:translateX(-50%) scale(.95,1.08) rotate(-1.5deg); }
231 40% { transform:translateX(-50%) scale(1.03,.96) rotate(1.2deg); }
232 58% { transform:translateX(-50%) scale(.96,1.06) rotate(-.8deg); }
233 74% { transform:translateX(-50%) scale(1.02,.98) rotate(.8deg); }
234 100% { transform:translateX(-50%) scale(.92,1.02) rotate(-2deg); }
235 }
236
237 @keyframes flameBob{
238 0% { transform:translateX(-50%) translateY(1px); }
239 50% { transform:translateX(-50%) translateY(-1px); }
240 100% { transform:translateX(-50%) translateY(1px); }
241 }
242
243 @keyframes beamPulse{
244 0%,100% { opacity:.72; transform:translateX(-50%) scaleY(.98); }
245 50% { opacity:.92; transform:translateX(-50%) scaleY(1.04); }
246 }
247
248 @keyframes haloPulse{
249 0%,100% { opacity:.55; transform:translate(-50%,-50%) scale(.96); }
250 50% { opacity:.82; transform:translate(-50%,-50%) scale(1.06); }
251 }
252</style>
253</head>
254<body>
255 <div class="scene">
256 <div class="lantern">
257 <div class="halo"></div>
258 <div class="beam"></div>
259 <div class="handle"></div>
260 <div class="cap"></div>
261 <div class="glass"></div>
262 <div class="base-top"></div>
263 <div class="base"></div>
264 <div class="flame-wrap">
265 <div class="wick"></div>
266 <div class="flame"></div>
267 </div>
268 </div>
269 </div>
270</body>
271</html>