Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css
Post on:2016年10月24日
sponsors
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。
コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。
HUE.cssを使うと、簡単に美しい背景を作りだすことができます。
Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。
画像: Free Promo Backdrops and Gradients
HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。
元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。
HUE.cssの使い方
使い方は、簡単です。
「hue.css」をダウンロードし、外部ファイルとして記述します。
|
1 2 3 |
<head> <link rel="stylesheet" href="hue.css"> </head> |
あとは、背景を適用したい要素にclassを与えるだけです。
|
1 2 3 |
<div class="theBridge"> <p>.theBridge</p> </div> |
HUE.cssの美しい背景
HUE.cssでどんな背景が実装できるか見てみましょう。
.theBridge
|
1 2 3 4 |
.theBridge { background: -webkit-linear-gradient(223deg, #EBEBEB 0%, #C5C6C8 100%), -webkit-linear-gradient(295deg, rgba(255, 255, 255, 0.5) 5%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(227deg, #EBEBEB 0%, #C5C6C8 100%), linear-gradient(155deg, rgba(255, 255, 255, 0.5) 5%, rgba(0, 0, 0, 0.5) 100%); background-blend-mode: multiply; } |
.deepFocus
|
1 2 3 |
.deepFocus { background-image: -webkit-linear-gradient(top, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%); background-image: linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%); } |
.blueHour
|
1 2 3 |
.blueHour { background: -webkit-linear-gradient(left, #7E898F 0%, #636C75 100%), -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.55) 100%), -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.08) 63%); background: linear-gradient(90deg, #7E898F 0%, #636C75 100%), radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.55) 100%), radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.08) 63%); |
.darkAmber
|
1 2 3 |
.darkAmber { background-image: -webkit-linear-gradient(top, #15140F 0%, #34312C 97%); background-image: linear-gradient(-180deg, #15140F 0%, #34312C 97%); } |
.prelude
|
1 2 3 |
.prelude { background-image: -webkit-radial-gradient(51% 96%, #E7E9E4 10%, #D4D6D1 96%); background-image: radial-gradient(51% 96%, #E7E9E4 10%, #D4D6D1 96%); } |
.saltAndPepper
|
1 2 3 4 |
.saltAndPepper { background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 2%, rgba(0, 0, 0, 0.5) 100%), -webkit-radial-gradient(51% 97%, #E8E8E8 7%, #CCCCCC 97%); background: linear-gradient(-180deg, rgba(255, 255, 255, 0.5) 2%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(51% 97%, #E8E8E8 7%, #CCCCCC 97%); background-blend-mode: multiply; } |
.cashemere
|
1 2 3 |
.cashemere { background-image: -webkit-radial-gradient(51% 98%, #D3D4CF 7%, #BDBFBA 98%); background-image: radial-gradient(51% 98%, #D3D4CF 7%, #BDBFBA 98%); } |
.wolverine
|
1 2 3 4 |
.wolverine { background: -webkit-linear-gradient(left, #BDBFBA 4%, #5A5C5B 98%), -webkit-linear-gradient(16deg, rgba(255, 255, 255, 0.5) 54%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(90deg, #BDBFBA 4%, #5A5C5B 98%), linear-gradient(74deg, rgba(255, 255, 255, 0.5) 54%, rgba(0, 0, 0, 0.5) 100%); background-blend-mode: multiply; } |
.fullMoon
|
1 2 3 4 |
.fullMoon { background-image: -webkit-linear-gradient(#DEDFE3 2%, #AEB3B9 95%), -webkit-radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(#DEDFE3 2%, #AEB3B9 95%), radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); background-blend-mode: screen; } |
.flamingo
|
1 2 3 4 |
.flamingo { background-image: -webkit-radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), -webkit-radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%); background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255, 255, 255, 0.5) 47%, rgba(0, 0, 0, 0.5) 100%); background-blend-mode: screen; } |
.earlyMorning
|
1 2 3 4 |
.earlyMorning { background: -webkit-linear-gradient(top, #BCC5CE 0%, #929EAD 98%), -webkit-radial-gradient(at top left, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); background-blend-mode: screen; } |
.nearLight
|
1 2 3 |
.nearLight { background-image: -webkit-radial-gradient(at top right, #B7B6BB 0%, #E8EAE9 100%); background-image: radial-gradient(at top right, #B7B6BB 0%, #E8EAE9 100%); } |
.mirror
|
1 2 3 4 5 |
.mirror { background: #C9CCD3; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); background-blend-mode: lighten; } |
.dementor
|
1 2 3 4 |
.dementor { background: -webkit-linear-gradient(top, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.25) 200%); background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.25) 200%); background-blend-mode: multiply; } |
.underTheEarth
|
1 2 3 |
.underTheEarth { background-image: -webkit-radial-gradient(50% 150%, #787B7D 5%, #4B5052 100%); background-image: radial-gradient(50% 150%, #787B7D 5%, #4B5052 100%); } |
.backToAlaska
|
1 2 3 4 5 |
.backToAlaska { background: -webkit-radial-gradient(55% 330%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 550%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.6) 50%), -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 120%); background: radial-gradient(55% 330%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 550%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.6) 50%), linear-gradient(to top right, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 120%); background-color: #DFE3E4; background-blend-mode: color-burn, screen, color-burn; } |
.flash
|
1 2 3 |
.flash { background-image: -webkit-linear-gradient(top, #E9E9E7 2%, #EFEEEC 27%, #EEEEEC 58%, #D5D4D0 94%); background-image: linear-gradient(180deg, #E9E9E7 2%, #EFEEEC 27%, #EEEEEC 58%, #D5D4D0 94%); } |
.unicorn
|
1 2 3 4 |
.unicorn { background: -webkit-linear-gradient(top, #E1E6EC 0%, #F0F4F7 100%), -webkit-linear-gradient(top, #E1E6EC 0%, #F0F4F7 100%); background: linear-gradient(to bottom, #E1E6EC 0%, #F0F4F7 100%), linear-gradient(to bottom, #E1E6EC 0%, #F0F4F7 100%); background-blend-mode: normal,color-burn; } |
.tribute
|
1 2 3 |
.tribute { background-image: -webkit-linear-gradient(right, #596164 1%, #868F96 99%); background-image: linear-gradient(-90deg, #596164 1%, #868F96 99%); } |
.twinPeaks
|
1 2 3 |
.twinPeaks { background-image: -webkit-linear-gradient(left, #F4F4F4 4%, #DFDEDC 99%); background-image: linear-gradient(to right, #F4F4F4 4%, #DFDEDC 99%); } |
.youngForest
|
1 2 3 4 |
.youngForest { background: -webkit-linear-gradient(top right, #E2E8E6 0%, #CDD3CD 100%), -webkit-linear-gradient(right, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.12) 100%); background: linear-gradient(to bottom left, #E2E8E6 0%, #CDD3CD 100%), linear-gradient(to left, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.12) 100%); background-blend-mode: screen; } |
.air
|
1 2 3 4 |
.air { background: -webkit-linear-gradient(top, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.02) 50%, rgba(255, 255, 255, 0.02) 61%, rgba(0, 0, 0, 0.02) 73%), -webkit-linear-gradient(57deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 50%, rgba(255, 255, 255, 0.02) 61%, rgba(0, 0, 0, 0.02) 73%), linear-gradient(33deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); background-blend-mode: normal,color-burn; } |
.tranquility
|
1 2 3 |
.tranquility { background-image: -webkit-linear-gradient(top, #A3A29E 0%, #B1B0AC 27%, #BCBBB7 49%, #E5E4E0 76%, #F3F2F0 100%); background-image: linear-gradient(to bottom, #A3A29E 0%, #B1B0AC 27%, #BCBBB7 49%, #E5E4E0 76%, #F3F2F0 100%); } |
.silverLake
|
1 2 3 4 |
.silverLake { background: #CCCCCC; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); } |
.amnesia
|
1 2 3 4 5 |
.amnesia { background-color: #DCD9D4; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.5) 50%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.5) 50%); background-blend-mode: soft-light,screen; } |
.silverStone
|
1 2 3 4 5 |
.silverStone { background: #989898; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), -webkit-radial-gradient(at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 120%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 120%); background-blend-mode: multiply,multiply; } |
.greyConnection
|
1 2 3 4 5 |
.greyConnection { background: #C4C4C4; background-image: -webkit-radial-gradient(50% 100%, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), -webkit-linear-gradient(right, rgba(255, 255, 255, 0.35) 0%, #929292 99%); background-image: radial-gradient(50% 100%, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(to left, rgba(255, 255, 255, 0.35) 0%, #929292 99%); background-blend-mode: normal,multiply; } |
.theCapsule
|
1 2 3 4 5 |
.theCapsule { background-color: #E4E4E1; background-image: -webkit-radial-gradient(at top center, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, rgba(143, 152, 157, 0.6) 100%); background-image: radial-gradient(at top center, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, rgba(143, 152, 157, 0.6) 100%); background-blend-mode: normal, multiply; } |
|
1 2 3 4 5 |
.hiddenGems { background: #BDB5B2; background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.2) 0%, #A1A1A1 100%), -webkit-linear-gradient(top right, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 95%); background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, #A1A1A1 100%), linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 95%); background-blend-mode: multiply; } |
.nightSmoothie
|
1 2 3 4 5 |
.nightSmoothie { background: #A2A2A4; background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.5) 200%); background-image: radial-gradient(rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.5) 200%); background-blend-mode: multiply; } |
.goldenLeaf
|
1 2 3 4 5 |
.goldenLeaf { background: #92847B; background-image: -webkit-radial-gradient(at bottom center, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 200%), -webkit-radial-gradient(at bottom center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); background-image: radial-gradient(at bottom center, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 200%), radial-gradient(at bottom center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); background-blend-mode: normal,screen; } |
.floatingDream
|
1 2 3 4 5 |
.floatingDream { background: #C2C2C2; background-image: -webkit-radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.5) 260%), -webkit-radial-gradient(at 61% 50%, rgba(255, 255, 255, 0.3) 55%, rgba(0, 0, 0, 0.5) 150%), -webkit-linear-gradient(top right, rgba(255, 255, 255, 0.25) 3%, rgba(0, 0, 0, 0.25) 100%), -webkit-linear-gradient(290deg, rgba(255, 255, 255, 0.5) 13%, rgba(0, 0, 0, 0.8) 100%); background-image: radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.5) 260%), radial-gradient(at 61% 50%, rgba(255, 255, 255, 0.3) 55%, rgba(0, 0, 0, 0.5) 150%), linear-gradient(to bottom left, rgba(255, 255, 255, 0.25) 3%, rgba(0, 0, 0, 0.25) 100%), linear-gradient(-200deg, rgba(255, 255, 255, 0.5) 13%, rgba(0, 0, 0, 0.8) 100%); background-blend-mode: normal,screen,normal,multiply; } |
.escape
|
1 2 3 4 5 |
.escape { background: #3E3E3E; background-image: -webkit-radial-gradient(at 50% -16%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.5) 190%); background-image: radial-gradient(at 50% -16%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.5) 190%); background-blend-mode: normal,multiply; } |
.icarus
|
1 2 3 4 5 |
.icarus { background: #A2A2A2; background-image: -webkit-radial-gradient(at 50% 90%, #B8B4B3 0%, #3B3A38 100%); background-image: radial-gradient(at 50% 90%, #B8B4B3 0%, #3B3A38 100%); background-blend-mode: normal,multiply; } |
.flashlight
|
1 2 3 |
.flashlight { background-image: -webkit-linear-gradient(left, #B1B1AF 4%, #484846 98%); background-image: linear-gradient(to right, #B1B1AF 4%, #484846 98%); } |
.milkyWay
|
1 2 3 |
.milkyWay { background-image: -webkit-linear-gradient(bottom, #F4F4F4 0%, #DFDEDC 100%); background-image: linear-gradient(to top, #F4F4F4 0%, #DFDEDC 100%); } |
.circular
|
1 2 3 4 5 |
.circular { background: #EBEBE9; background-image: -webkit-linear-gradient(160deg, rgba(255, 255, 255, 0.35) 3%, rgba(0, 0, 0, 0.35) 100%), -webkit-radial-gradient(101% 97%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 98%); background-image: linear-gradient(-70deg, rgba(255, 255, 255, 0.35) 3%, rgba(0, 0, 0, 0.35) 100%), radial-gradient(101% 97%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 98%); background-blend-mode: normal,normal,lighten; } |
.autumn
|
1 2 3 |
.autumn { background-image: -webkit-radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%); background-image: radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%); } |
.northKingdom
|
1 2 3 4 |
.northKingdom { background-image: -webkit-linear-gradient(right, #BDBBBE 0%, #9D9EA3 100%), -webkit-radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), -webkit-radial-gradient(50% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); background-blend-mode: normal, lighten, soft-light; } |
.jupiter
|
1 2 3 |
.jupiter { background-image: -webkit-linear-gradient(top, #504D48 5%, #33342F 96%); background-image: linear-gradient(-180deg, #504D48 5%, #33342F 96%); } |
.whiteNoise
|
1 2 3 4 5 |
.whiteNoise { background-color: #E1E6EC; background-image: -webkit-linear-gradient(top, #E1E6EC 2%, #F0F4F7 96%), -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 200%); background-image: linear-gradient(-180deg, #E1E6EC 2%, #F0F4F7 96%), radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 200%); background-blend-mode: normal, color-burn; } |
.silverSurfer
|
1 2 3 4 |
.silverSurfer { background-image: -webkit-linear-gradient(top, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), -webkit-linear-gradient(top, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), -webkit-radial-gradient(at 50% 59%, rgba(255, 255, 255, 0.3) 66%, rgba(0, 0, 0, 0.3) 200%); background-image: linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), radial-gradient(at 50% 59%, rgba(255, 255, 255, 0.3) 66%, rgba(0, 0, 0, 0.3) 200%); background-blend-mode: multiply,multiply,screen; } |
.blackSands
|
1 2 3 4 5 |
.blackSands { background-color: #9D9B97; background-image: -webkit-radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); background-image: radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); background-blend-mode: normal, multiply; } |
.greyHound
|
1 2 3 4 5 |
.greyHound { background: #989898; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), -webkit-radial-gradient(at 50% -100%, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 270%), -webkit-radial-gradient(at 50% 2%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at 50% -100%, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 270%), radial-gradient(at 50% 2%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); background-blend-mode: normal,multiply,multiply; } |
.returnToAir
|
1 2 3 |
.returnToAir { background-image: -webkit-linear-gradient(top, #C8C9D1 0%, #AAAFB7 99%); background-image: linear-gradient(180deg, #C8C9D1 0%, #AAAFB7 99%); } |
.graphite
|
1 2 3 4 5 |
.graphite { background: #282828; background-image: -webkit-linear-gradient(right, #7B7F82 2%, #303136 100%), -webkit-radial-gradient(50% 116%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(149deg, rgba(255, 255, 255, 0.5) 7%, rgba(87, 87, 87, 0.5) 68%, rgba(85, 85, 85, 0.5) 76%, rgba(0, 0, 0, 0.5) 100%); background-image: linear-gradient(-90deg, #7B7F82 2%, #303136 100%), radial-gradient(50% 116%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(-59deg, rgba(255, 255, 255, 0.5) 7%, rgba(87, 87, 87, 0.5) 68%, rgba(85, 85, 85, 0.5) 76%, rgba(0, 0, 0, 0.5) 100%); background-blend-mode: normal,multiply,multiply; } |
.cosmos
|
1 2 3 4 5 |
.cosmos { background-color: #797572; background-image: -webkit-linear-gradient(263deg, rgba(255, 255, 255, 0.2) 0%, #000000 100%), -webkit-linear-gradient(18deg, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.25) 100%), -webkit-radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(21, 24, 32, 0.6) 120%); background-image: linear-gradient(-173deg, rgba(255, 255, 255, 0.2) 0%, #000000 100%), linear-gradient(72deg, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(21, 24, 32, 0.6) 120%); background-blend-mode: multiply; } |
.ice
|
1 2 3 4 5 |
.ice { background-color: #CDDCDC; background-image: -webkit-radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%); background-image: radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%); background-blend-mode: screen, overlay; } |
.comet
|
1 2 3 4 5 |
.comet { background-color: #646770; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), -webkit-radial-gradient(at 50% 87%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), radial-gradient(at 50% 87%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); background-blend-mode: multiply,normal; } |
sponsors
