Liftoff — Pure CSS 3D Helicopter

A pure CSS/HTML 3D helicopter — no JavaScript, no images, no canvas. Click and hold to watch it shift into a lift-off pose as the rotor spins up to full speed.

---

What's Included

• Full 3D helicopter build (body, tail rotor, landing skids, cockpit windows) using only CSS transforms and clip-path
• Interactive click/tap-and-hold lift-off animation
• Continuous idle rotor spin via CSS keyframes
• Fully responsive scaling via clamp()
• Zero JavaScript, zero external libraries

---

Dependencies

None — pure HTML/CSS, no external libraries or CDNs required.

---

Desktop Preview

---

HTML

html
Copy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8    <title>CSS 3D Helicopter — MetaSkillGroup</title>
9    <meta name="description" content="A pure CSS/HTML 3D helicopter animation — no images, no canvas, no JS libraries. A frontend showcase piece by MetaSkillGroup (metaskillgroup.com).">
10    <meta name="author" content="MetaSkillGroup">
11
12    <!-- Update this once the Netlify URL is live -->
13    <link rel="canonical" href="https://REPLACE-WITH-YOUR-NETLIFY-URL.netlify.app/">
14
15    <!-- Open Graph -->
16    <meta property="og:type" content="website">
17    <meta property="og:title" content="CSS 3D Helicopter — MetaSkillGroup">
18    <meta property="og:description" content="A pure CSS/HTML 3D helicopter animation, built entirely with CSS transforms and clip-path — no libraries, no canvas.">
19    <meta property="og:url" content="https://REPLACE-WITH-YOUR-NETLIFY-URL.netlify.app/">
20    <meta property="og:site_name" content="MetaSkillGroup">
21    <!-- Add this once the GIF is ready, drop it in assets/img/preview.gif -->
22    <!-- <meta property="og:image" content="./assets/img/preview.gif"> -->
23
24    <!-- Twitter -->
25    <meta name="twitter:card" content="summary_large_image">
26    <meta name="twitter:title" content="CSS 3D Helicopter — MetaSkillGroup">
27    <meta name="twitter:description" content="A pure CSS/HTML 3D helicopter animation, built entirely with CSS transforms and clip-path.">
28    <!-- <meta name="twitter:image" content="./assets/img/preview.gif"> -->
29
30    <link rel="stylesheet" href="./assets/css/style.css">
31
32    <style>
33        .msg-credit {
34            position: fixed;
35            bottom: 14px;
36            right: 18px;
37            font-family: sans-serif;
38            font-size: 12px;
39            color: #848484;
40            text-decoration: none;
41            letter-spacing: .02em;
42            z-index: 10;
43        }
44        .msg-credit:hover {
45            color: #242426;
46            text-decoration: underline;
47        }
48    </style>
49</head>
50<body>
51    <div class="helicopter">
52        <div class="helicopter__case">
53            <div class="helicopter__back">
54                <div class="helicopter__back__layer"></div>
55                <div class="helicopter__back__blades"></div>
56            </div>
57            <div class="helicopter__bottom">
58                <div class="helicopter__bottom__pip-left"></div>
59                <div class="helicopter__bottom__pip-right"></div>
60                <div class="helicopter__bottom__pip"></div>
61            </div>
62            <div class="helicopter__body">
63                <div class="helicopter__body__base"></div>
64                <div class="helicopter__body__base-top">
65                    <div class="helicopter__body__base-top__window"></div>
66                </div>
67                <div class="helicopter__body__front"></div>
68                <div class="helicopter__body__front-window"></div>
69                <div class="helicopter__body__roof"></div>
70            </div>
71            <div class="helicopter__top">
72                <div class="helicopter__top__blades">
73                    <div class="helicopter__top__blades__item" style="--i:1"></div>
74                    <div class="helicopter__top__blades__item" style="--i:2"></div>
75                    <div class="helicopter__top__blades__item" style="--i:3"></div>
76                    <div class="helicopter__top__blades__item" style="--i:4"></div>
77                </div>
78            </div>
79        </div>
80    </div>
81
82    <a href="https://metaskillgroup.com" target="_blank" rel="noopener" class="msg-credit">Built by MetaSkillGroup</a>
83
84    <script>
85        /* Window Match Height Function */
86        window.addEventListener("load", function(){
87            document.querySelector("body").style.minHeight = document.querySelector("html").scrollHeight + "px";
88        });
89    </script>
90</body>
91</html>
92

CSS

css
Copy
1*,
2*::before,
3*::after {
4  margin: 0;
5  padding: 0;
6  -webkit-box-sizing: border-box;
7     -moz-box-sizing: border-box;
8          box-sizing: border-box;
9  -webkit-tap-highlight-color: transparent;
10}
11
12*::before,
13*::after {
14  outline: 1px solid transparent;
15}
16
17html {
18  font-size: clamp(7px, 1.5vw, 10px);
19}
20
21body, .helicopter__case, .helicopter__back, .helicopter__back__layer, .helicopter__back__blades, .helicopter__bottom, .helicopter__bottom__pip, .helicopter__bottom__pip-left, .helicopter__bottom__pip-right, .helicopter__body, .helicopter__body__base-top__window, .helicopter__top, .helicopter__top__blades {
22  -webkit-transform-style: preserve-3d;
23     -moz-transform-style: preserve-3d;
24          transform-style: preserve-3d;
25}
26
27.helicopter__back, .helicopter__back::before, .helicopter__back::after, .helicopter__back__layer, .helicopter__back__layer::after, .helicopter__back__blades, .helicopter__back__blades::before, .helicopter__back__blades::after, .helicopter__bottom, .helicopter__bottom__pip, .helicopter__bottom__pip::after, .helicopter__bottom__pip-left, .helicopter__bottom__pip-right, .helicopter__bottom__pip-left::before, .helicopter__bottom__pip-right::before, .helicopter__body, .helicopter__body__base, .helicopter__body__base-top, .helicopter__body__base-top__window, .helicopter__body__front, .helicopter__body__front-window, .helicopter__body__roof, .helicopter__top, .helicopter__top__blades, .helicopter__top__blades__item {
28  position: absolute;
29}
30
31body {
32  display: -ms-grid;
33  display: grid;
34  place-items: center;
35  overflow: hidden;
36  -webkit-perspective: 70rem;
37     -moz-perspective: 70rem;
38          perspective: 70rem;
39}
40
41body:active .helicopter__case {
42  -webkit-transform: rotateX(55deg) rotateY(10deg) rotateZ(45deg) translateZ(0);
43     -moz-transform: rotateX(55deg) rotateY(10deg) rotateZ(45deg) translateZ(0);
44          transform: rotateX(55deg) rotateY(10deg) rotateZ(45deg) translateZ(0);
45}
46
47body:active .helicopter__top__blades {
48  --rotate: 360deg;
49  -webkit-animation-duration: 0.4s;
50     -moz-animation-duration: 0.4s;
51       -o-animation-duration: 0.4s;
52          animation-duration: 0.4s;
53}
54
55div {
56  outline: 1px solid transparent;
57}
58
59.helicopter__case {
60  --size: 4rem;
61  position: relative;
62  width: 22rem;
63  height: 10rem;
64  margin-top: 5rem;
65  margin-left: 15rem;
66  -webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(-5rem);
67     -moz-transform: rotateX(60deg) rotateZ(45deg) translateZ(-5rem);
68          transform: rotateX(60deg) rotateZ(45deg) translateZ(-5rem);
69  -webkit-transition: -webkit-transform .3s linear;
70  transition: -webkit-transform .3s linear;
71  -o-transition: -o-transform .3s linear;
72  -moz-transition: transform .3s linear, -moz-transform .3s linear;
73  transition: transform .3s linear;
74  transition: transform .3s linear, -webkit-transform .3s linear, -moz-transform .3s linear, -o-transform .3s linear;
75}
76
77.helicopter__back {
78  left: 0;
79  -webkit-transform-origin: right center;
80     -moz-transform-origin: right center;
81      -ms-transform-origin: right center;
82       -o-transform-origin: right center;
83          transform-origin: right center;
84  -webkit-transform: translateX(-100%) translateZ(calc(var(--size) / 1.2)) rotateY(15deg);
85     -moz-transform: translateX(-100%) translateZ(-moz-calc(var(--size) / 1.2)) rotateY(15deg);
86          transform: translateX(-100%) translateZ(calc(var(--size) / 1.2)) rotateY(15deg);
87  width: 100%;
88  height: 100%;
89}
90
91.helicopter__back::before, .helicopter__back::after {
92  content: "";
93}
94
95.helicopter__back::before {
96  width: 100%;
97  height: -moz-calc(var(--size) * 2);
98  height: calc(var(--size) * 2);
99  background-color: #939393;
100  -webkit-transform-origin: left bottom;
101     -moz-transform-origin: left bottom;
102      -ms-transform-origin: left bottom;
103       -o-transform-origin: left bottom;
104          transform-origin: left bottom;
105  bottom: 0;
106  -webkit-transform: rotateX(-90deg);
107     -moz-transform: rotateX(-90deg);
108          transform: rotateX(-90deg);
109  -webkit-clip-path: polygon(0 72%, 100% 0, 100% 100%, 0 100%);
110          clip-path: polygon(0 72%, 100% 0, 100% 100%, 0 100%);
111}
112
113.helicopter__back::after {
114  width: 100%;
115  height: 100%;
116  background-color: #aaaaaa;
117  -webkit-transform-origin: right center;
118     -moz-transform-origin: right center;
119      -ms-transform-origin: right center;
120       -o-transform-origin: right center;
121          transform-origin: right center;
122  -webkit-transform: translateZ(calc(var(--size) * 2)) rotateY(-15deg);
123     -moz-transform: translateZ(-moz-calc(var(--size) * 2)) rotateY(-15deg);
124          transform: translateZ(calc(var(--size) * 2)) rotateY(-15deg);
125  -webkit-clip-path: polygon(0 72%, 100% 0, 100% 100%, 0 100%);
126          clip-path: polygon(0 72%, 100% 0, 100% 100%, 0 100%);
127}
128
129.helicopter__back__layer {
130  width: 30%;
131  height: 3rem;
132  background-color: #939393;
133  bottom: 0;
134  -webkit-transform-origin: left center;
135     -moz-transform-origin: left center;
136      -ms-transform-origin: left center;
137       -o-transform-origin: left center;
138          transform-origin: left center;
139  -webkit-transform: rotateY(-120deg);
140     -moz-transform: rotateY(-120deg);
141          transform: rotateY(-120deg);
142}
143
144.helicopter__back__layer::after {
145  content: "";
146  width: 100%;
147  height: -moz-calc(100% - 1px);
148  height: calc(100% - 1px);
149  top: 0;
150  left: 0;
151  background-color: #8c8c8c;
152  -webkit-transform-origin: right center;
153     -moz-transform-origin: right center;
154      -ms-transform-origin: right center;
155       -o-transform-origin: right center;
156          transform-origin: right center;
157  -webkit-transform: rotateY(-20deg);
158     -moz-transform: rotateY(-20deg);
159          transform: rotateY(-20deg);
160}
161
162.helicopter__back__blades {
163  width: 1.2rem;
164  height: 1.2rem;
165  bottom: 0;
166  left: 0;
167  -webkit-transform: rotateX(90deg) translateY(200%) translateX(-200%) translateZ(8px);
168     -moz-transform: rotateX(90deg) translateY(200%) translateX(-200%) translateZ(8px);
169          transform: rotateX(90deg) translateY(200%) translateX(-200%) translateZ(8px);
170}
171
172.helicopter__back__blades::before, .helicopter__back__blades::after {
173  content: "";
174  width: 100%;
175  height: 100%;
176  border-radius: 50%;
177  background-color: #242426;
178  -webkit-box-shadow: 0 0 0 1.3em #c4c4c4, 0 0 0 1.8em #848484, 0 0 0 1.85em #303033;
179          box-shadow: 0 0 0 1.3em #c4c4c4, 0 0 0 1.8em #848484, 0 0 0 1.85em #303033;
180}
181
182.helicopter__back__blades::before {
183  -webkit-transform: translateZ(-2rem);
184     -moz-transform: translateZ(-2rem);
185          transform: translateZ(-2rem);
186}
187
188.helicopter__back__blades::after {
189  -webkit-transform: translateZ(2rem);
190     -moz-transform: translateZ(2rem);
191          transform: translateZ(2rem);
192}
193
194.helicopter__bottom {
195  --leg-size: 1rem;
196  left: 10%;
197  width: 80%;
198  height: 100%;
199}
200
201.helicopter__bottom__pip {
202  bottom: 0;
203  left: 0;
204  -webkit-transform: translateY(4.9rem) translateZ(calc(var(--leg-size) * -1));
205     -moz-transform: translateY(4.9rem) translateZ(-moz-calc(var(--leg-size) * -1));
206          transform: translateY(4.9rem) translateZ(calc(var(--leg-size) * -1));
207  width: 100%;
208  height: var(--leg-size);
209  background-color: #515151;
210}
211
212.helicopter__bottom__pip::after {
213  content: "";
214  top: 0;
215  right: 0;
216  -webkit-transform-origin: left top;
217     -moz-transform-origin: left top;
218      -ms-transform-origin: left top;
219       -o-transform-origin: left top;
220          transform-origin: left top;
221  -webkit-transform: translateX(calc(100% - 4px)) rotateZ(-20deg);
222     -moz-transform: translateX(-moz-calc(100% - 4px)) rotateZ(-20deg);
223      -ms-transform: translateX(calc(100% - 4px)) rotate(-20deg);
224       -o-transform: translateX(calc(100% - 4px)) rotateZ(-20deg);
225          transform: translateX(calc(100% - 4px)) rotateZ(-20deg);
226  width: 10%;
227  height: 100%;
228  background-color: #515151;
229}
230
231.helicopter__bottom__pip-left, .helicopter__bottom__pip-right {
232  bottom: 0;
233  -webkit-transform-origin: center top;
234     -moz-transform-origin: center top;
235      -ms-transform-origin: center top;
236       -o-transform-origin: center top;
237          transform-origin: center top;
238  -webkit-transform: translateY(100%) rotateX(-25deg);
239     -moz-transform: translateY(100%) rotateX(-25deg);
240          transform: translateY(100%) rotateX(-25deg);
241  width: var(--leg-size);
242  height: 2.5rem;
243  background-color: #515151;
244}
245
246.helicopter__bottom__pip-left::before, .helicopter__bottom__pip-right::before {
247  content: "";
248  bottom: 0;
249  left: 0;
250  -webkit-transform-origin: center bottom;
251     -moz-transform-origin: center bottom;
252      -ms-transform-origin: center bottom;
253       -o-transform-origin: center bottom;
254          transform-origin: center bottom;
255  -webkit-transform: rotateX(135deg) translateY(1px);
256     -moz-transform: rotateX(135deg) translateY(1px);
257          transform: rotateX(135deg) translateY(1px);
258  width: 100%;
259  height: 60%;
260  background-color: #515151;
261}
262
263.helicopter__bottom__pip-left {
264  left: 10%;
265}
266
267.helicopter__bottom__pip-right {
268  right: 30%;
269}
270
271.helicopter__body {
272  inset: 0;
273}
274
275.helicopter__body__base, .helicopter__body__base-top {
276  bottom: 0;
277  -webkit-transform-origin: left bottom;
278     -moz-transform-origin: left bottom;
279      -ms-transform-origin: left bottom;
280       -o-transform-origin: left bottom;
281          transform-origin: left bottom;
282  width: 100%;
283  background-color: #515151;
284}
285
286.helicopter__body__base {
287  -webkit-transform: rotateX(-90deg);
288     -moz-transform: rotateX(-90deg);
289          transform: rotateX(-90deg);
290  height: -moz-calc(var(--size) + 1px);
291  height: calc(var(--size) + 1px);
292}
293
294.helicopter__body__base-top {
295  -webkit-transform: translateZ(var(--size)) rotateX(-90deg);
296     -moz-transform: translateZ(var(--size)) rotateX(-90deg);
297          transform: translateZ(var(--size)) rotateX(-90deg);
298  height: -moz-calc(var(--size) * 2);
299  height: calc(var(--size) * 2);
300  -webkit-clip-path: polygon(0 0, calc(100% - (var(--size) * 1.65)) 0, 100% 100%, 0 100%);
301          clip-path: polygon(0 0, -moz-calc(100% - (var(--size) * 1.65)) 0, 100% 100%, 0 100%);
302          clip-path: polygon(0 0, calc(100% - (var(--size) * 1.65)) 0, 100% 100%, 0 100%);
303}
304
305.helicopter__body__base-top__window {
306  --border: 1.2rem;
307  background: -webkit-linear-gradient(40deg, #3d3d40 25%, #242426 25%, #242426 40%, #3d3d40 40%, #3d3d40 55%, #242426 55%);
308  background: -moz-linear-gradient(40deg, #3d3d40 25%, #242426 25%, #242426 40%, #3d3d40 40%, #3d3d40 55%, #242426 55%);
309  background: -o-linear-gradient(40deg, #3d3d40 25%, #242426 25%, #242426 40%, #3d3d40 40%, #3d3d40 55%, #242426 55%);
310  background: linear-gradient(50deg, #3d3d40 25%, #242426 25%, #242426 40%, #3d3d40 40%, #3d3d40 55%, #242426 55%);
311  top: var(--border);
312  right: var(--border);
313  bottom: 0;
314  left: var(--border);
315  -webkit-clip-path: polygon(0 0, calc(100% - (var(--size) * 1.65)) 0, 100% 100%, 0 100%);
316          clip-path: polygon(0 0, -moz-calc(100% - (var(--size) * 1.65)) 0, 100% 100%, 0 100%);
317          clip-path: polygon(0 0, calc(100% - (var(--size) * 1.65)) 0, 100% 100%, 0 100%);
318}
319
320.helicopter__body__front, .helicopter__body__front-window {
321  top: 0;
322  right: 0;
323  -webkit-transform-origin: right top;
324     -moz-transform-origin: right top;
325      -ms-transform-origin: right top;
326       -o-transform-origin: right top;
327          transform-origin: right top;
328  height: 100%;
329}
330
331.helicopter__body__front {
332  --sudo: 75%;
333  -webkit-transform: rotateY(90deg) translateY(0.6px);
334     -moz-transform: rotateY(90deg) translateY(0.6px);
335          transform: rotateY(90deg) translateY(0.6px);
336  width: -moz-calc(var(--size) + 1px);
337  width: calc(var(--size) + 1px);
338  background: -webkit-gradient(linear, left top, right top, from(#898989), to(#515151));
339  background: -webkit-linear-gradient(left, #898989 var(--sudo), #515151 var(--sudo));
340  background: -moz-linear-gradient(left, #898989 var(--sudo), #515151 var(--sudo));
341  background: -o-linear-gradient(left, #898989 var(--sudo), #515151 var(--sudo));
342  background: linear-gradient(to right, #898989 var(--sudo), #515151 var(--sudo));
343}
344
345.helicopter__body__front-window {
346  -webkit-transform: translateZ(var(--size)) rotateY(50deg);
347     -moz-transform: translateZ(var(--size)) rotateY(50deg);
348          transform: translateZ(var(--size)) rotateY(50deg);
349  width: -moz-calc(var(--size) * 2.59);
350  width: calc(var(--size) * 2.59);
351  background: -webkit-linear-gradient(75deg, #242426 25%, #3d3d40 25%, #3d3d40 40%, #242426 40%, #242426 55%, #3d3d40 55%);
352  background: -moz-linear-gradient(75deg, #242426 25%, #3d3d40 25%, #3d3d40 40%, #242426 40%, #242426 55%, #3d3d40 55%);
353  background: -o-linear-gradient(75deg, #242426 25%, #3d3d40 25%, #3d3d40 40%, #242426 40%, #242426 55%, #3d3d40 55%);
354  background: linear-gradient(15deg, #242426 25%, #3d3d40 25%, #3d3d40 40%, #242426 40%, #242426 55%, #3d3d40 55%);
355  border: 0.8rem solid #9e9e9e;
356}
357
358.helicopter__body__roof {
359  width: -moz-calc(100% - (var(--size) * 1.66));
360  width: calc(100% - (var(--size) * 1.66));
361  -webkit-transform: translateZ(calc((var(--size) * 3) - 1px));
362     -moz-transform: translateZ(-moz-calc((var(--size) * 3) - 1px));
363          transform: translateZ(calc((var(--size) * 3) - 1px));
364  height: 100%;
365  background-color: #848484;
366}
367
368.helicopter__top {
369  --circle: 4rem;
370  --circle-gap: 0.5rem;
371  top: 50%;
372  left: 30%;
373  -webkit-transform: translateX(-50%) translateY(-50%) translateZ(calc((var(--size) * 3) + var(--circle-gap)));
374     -moz-transform: translateX(-50%) translateY(-50%) translateZ(-moz-calc((var(--size) * 3) + var(--circle-gap)));
375          transform: translateX(-50%) translateY(-50%) translateZ(calc((var(--size) * 3) + var(--circle-gap)));
376  width: var(--circle);
377  height: var(--circle);
378  background-color: #919191;
379  border: 0.1rem solid #242426;
380  border-radius: 50%;
381}
382
383.helicopter__top::before {
384  content: "";
385  position: absolute;
386  top: 0;
387  left: 0;
388  -webkit-transform: translateZ(calc(var(--circle-gap) * -1));
389     -moz-transform: translateZ(-moz-calc(var(--circle-gap) * -1));
390          transform: translateZ(calc(var(--circle-gap) * -1));
391  width: 120%;
392  height: 120%;
393  background-color: #242426;
394  border-radius: inherit;
395}
396
397.helicopter__top__blades {
398  --rotate: 90deg;
399  inset: 0;
400  -webkit-transform: rotate(0) translateZ(calc((var(--circle-gap) / 2) * -1));
401     -moz-transform: rotate(0) translateZ(-moz-calc((var(--circle-gap) / 2) * -1));
402          transform: rotate(0) translateZ(calc((var(--circle-gap) / 2) * -1));
403  -webkit-animation: round 5s linear infinite;
404     -moz-animation: round 5s linear infinite;
405       -o-animation: round 5s linear infinite;
406          animation: round 5s linear infinite;
407  will-change: transform;
408}
409
410@-webkit-keyframes round {
411  100% {
412    -webkit-transform: rotate(var(--rotate)) translateZ(calc((var(--circle-gap) / 2) * -1));
413            transform: rotate(var(--rotate)) translateZ(calc((var(--circle-gap) / 2) * -1));
414  }
415}
416
417@-moz-keyframes round {
418  100% {
419    -moz-transform: rotate(var(--rotate)) translateZ(-moz-calc((var(--circle-gap) / 2) * -1));
420         transform: rotate(var(--rotate)) translateZ(calc((var(--circle-gap) / 2) * -1));
421  }
422}
423
424@-o-keyframes round {
425  100% {
426    transform: rotate(var(--rotate)) translateZ(calc((var(--circle-gap) / 2) * -1));
427  }
428}
429
430@keyframes round {
431  100% {
432    -webkit-transform: rotate(var(--rotate)) translateZ(calc((var(--circle-gap) / 2) * -1));
433       -moz-transform: rotate(var(--rotate)) translateZ(-moz-calc((var(--circle-gap) / 2) * -1));
434            transform: rotate(var(--rotate)) translateZ(calc((var(--circle-gap) / 2) * -1));
435  }
436}
437
438.helicopter__top__blades__item {
439  bottom: 50%;
440  left: 50%;
441  -webkit-transform-origin: left bottom;
442     -moz-transform-origin: left bottom;
443      -ms-transform-origin: left bottom;
444       -o-transform-origin: left bottom;
445          transform-origin: left bottom;
446  -webkit-transform: rotate(calc(var(--i) * 90deg)) translateX(-50%) translateY(calc(var(--circle) / 2));
447     -moz-transform: rotate(-moz-calc(var(--i) * 90deg)) translateX(-50%) translateY(-moz-calc(var(--circle) / 2));
448      -ms-transform: rotate(calc(var(--i) * 90deg)) translateX(-50%) translateY(calc(var(--circle) / 2));
449       -o-transform: rotate(calc(var(--i) * 90deg)) translateX(-50%) translateY(calc(var(--circle) / 2));
450          transform: rotate(calc(var(--i) * 90deg)) translateX(-50%) translateY(calc(var(--circle) / 2));
451  width: -moz-calc(var(--circle) / 1.85);
452  width: calc(var(--circle) / 1.85);
453  height: 20vw;
454  min-height: 22rem;
455  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #242426), color-stop(5%, #c4c4c4), to(#c4c4c4));
456  background: -webkit-linear-gradient(top, #242426 5%, #c4c4c4 5%, #c4c4c4 100%);
457  background: -moz-linear-gradient(top, #242426 5%, #c4c4c4 5%, #c4c4c4 100%);
458  background: -o-linear-gradient(top, #242426 5%, #c4c4c4 5%, #c4c4c4 100%);
459  background: linear-gradient(to bottom, #242426 5%, #c4c4c4 5%, #c4c4c4 100%);
460}
461

---

Built by MetaSkillGroup — copy it, use it, make it yours.