├── README.md ├── index.html ├── screenshot.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # CSS Instagram Logo 2 | 3 | ![screenshot](screenshot.png) 4 | 5 | > MIT license 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Instagram logo 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 | 15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mittya/css-instagram-logo/a6b69add9f286cc3815a64e8e347cdcfc72d001c/screenshot.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Overview: The new instagram logo 3 | * Author: mittya 4 | * Code: https://github.com/mittya/css-instagram-logo 5 | */ 6 | 7 | body { 8 | background-color: #fff; 9 | background-image: 10 | linear-gradient(45deg, #d6d6d6 25%, transparent 25%, transparent 75%, #d6d6d6 75%, #d6d6d6), 11 | linear-gradient(45deg, #d6d6d6 25%, transparent 25%, transparent 75%, #d6d6d6 75%, #d6d6d6); 12 | background-size: 16px 16px; 13 | background-position: 0 0, 8px 8px 14 | } 15 | 16 | div { 17 | box-sizing: border-box; 18 | } 19 | 20 | .instagram { 21 | position: relative; 22 | width: 512px; 23 | height: 512px; 24 | overflow: hidden; 25 | margin-left: auto; 26 | margin-right: auto; 27 | margin-top: 5rem; 28 | border-radius: 110px; 29 | box-shadow: 0 38px 70px rgba(0,0,0,.15); 30 | 31 | background: linear-gradient( 32 | 39deg, 33 | rgba(255,188,65,1) 0%, 34 | rgba(193,41,166,1) 18%, 35 | rgba(221,40,125,1) 63%, 36 | rgba(147,28,156,1) 89%, 37 | rgba(155,26,183,1) 100% 38 | ); 39 | } 40 | 41 | .purple { 42 | position: absolute; 43 | left: 0; 44 | top: 0; 45 | width: 512px; 46 | height: 512px; 47 | border-radius: 90px; 48 | 49 | background: linear-gradient( 50 | 158deg, 51 | rgba(61, 79, 208,1) 0%, 52 | rgba(118,91,195,.8) 18%, 53 | rgba(190, 76, 230,.5) 30%, 54 | rgba(212, 59, 202,.56) 35%, 55 | rgba(218,45,125,0) 82% 56 | ); 57 | } 58 | 59 | .red { 60 | position: absolute; 61 | left: -230px; 62 | bottom: -220px; 63 | width: 800px; 64 | height: 550px; 65 | border-radius: 800px / 550px; 66 | 67 | background: radial-gradient( 68 | ellipse closest-side, 69 | rgba(251,77,49,1) 0%, 70 | rgba(241,75,49,.5) 45%, 71 | rgba(239,71,44,.15) 75%, 72 | rgba(239,71,44,0) 100% 73 | ); 74 | } 75 | 76 | .orange { 77 | position: absolute; 78 | left: -170px; 79 | bottom: -110px; 80 | width: 650px; 81 | height: 450px; 82 | 83 | background: radial-gradient( 84 | ellipse closest-side, 85 | rgb(220, 135, 30) 0%, 86 | rgba(247, 159, 51, 0.5) 40%, 87 | rgba(247, 170, 76, 0.3) 60%, 88 | rgba(255, 191, 57, 0) 100% 89 | ); 90 | } 91 | 92 | .yellow { 93 | position: absolute; 94 | left: -70px; 95 | bottom: -195px; 96 | width: 470px; 97 | height: 350px; 98 | 99 | background: radial-gradient( 100 | ellipse closest-side, 101 | rgba(247,236,108,1) 0%, 102 | rgba(247,236,108,.4) 60%, 103 | rgba(254,236,115,0) 100% 104 | ); 105 | } 106 | 107 | .border { 108 | position: absolute; 109 | left: 50%; 110 | top: 50%; 111 | width: 380px; 112 | height: 380px; 113 | margin-left: -190px; 114 | margin-top: -190px; 115 | border: 35px solid #fff; 116 | border-radius: 120px; 117 | box-shadow: 0 3px 10px rgba(0,0,0,.1), inset 0 6px 10px rgba(0,0,0,.1); 118 | } 119 | 120 | .cirlce { 121 | position: absolute; 122 | left: 50%; 123 | top: 50%; 124 | width: 198px; 125 | height: 198px; 126 | margin-left: -99px; 127 | margin-top: -99px; 128 | border: 35px solid #fff; 129 | border-radius: 50%; 130 | box-shadow: 0 3px 10px rgba(0,0,0,.1), inset 0 6px 10px rgba(0,0,0,.1); 131 | } 132 | 133 | .dot { 134 | position: absolute; 135 | left: 330px; 136 | top: 130px; 137 | width: 46px; 138 | height: 46px; 139 | background-color: #fff; 140 | border-radius: 50%; 141 | box-shadow: 0 3px 10px rgba(0,0,0,.1); 142 | } 143 | --------------------------------------------------------------------------------