neumorphic

[neumorphic]

Rectangular-forms

#container185 { position: absolute; width: 100%; height: 100%; } #container185 .container185boxholder { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; } #container185 .container185box1 { border: 1px solid rgba(212, 209, 212, 1); position: absolute; top: 34%; left: 71%; width: 1%; height: 20%; background-color: rgba(212, 209, 212, 1); transform: scale(0.3, 0.5); } #container185 .container185box1-1 { position: relative; padding: 0px 0px 0px 0px; height: 100%; border-style: groove; box-shadow: 0 0 0 1px hsl(300, 3%, 60%), 0 0 0 2px hsl(300, 3%, 61%), 0 0 0 3px hsl(300, 3%, 62%), 0 0 0 4px hsl(300, 3%, 63%), 0 0 0 5px hsl(300, 3%, 64%), 0 0 0 6px hsl(300, 3%, 65%), 0 0 0 7px hsl(300, 3%, 66%), 0 0 0 8px hsl(300, 3%, 67%), 0 0 0 9px hsl(300, 3%, 68%), 0 0 0 10px hsl(300, 3%, 69%), 0 0 0 11px hsl(300, 3%, 70%), 0 0 0 12px hsl(300, 3%, 71%), 0 0 0 13px hsl(300, 3%, 72%), 0 0 0 14px hsl(300, 3%, 73%), 0 0 0 15px hsl(300, 3%, 74%), 0 0 0 16px hsl(300, 3%, 75%), 0 0 0 17px hsl(300, 3%, 76%), 0 0 0 18px hsl(300, 3%, 77%), 0 0 0 19px hsl(300, 3%, 78%), 0 0 0 20px hsl(300, 3%, 79%), 0 0 0 21px hsl(300, 3%, 80%), 0 0 0 22px hsl(300, 3%, 81%), 0 0 0 23px hsl(300, 3%, 82%), 0 0 0 24px hsl(300, 3%, 83%), 0 0 0 25px hsl(300, 3%, 84%), 0 0 0 26px hsl(300, 3%, 85%), 0 0 0 27px hsl(300, 3%, 86%), 0 0 0 28px hsl(300, 3%, 87%), 0 0 0 29px hsl(300, 3%, 88%), 0 0 0 30px hsl(300, 3%, 89%), 0 0 0 31px hsl(300, 3%, 90%), 0 0 0 32px hsl(300, 3%, 91%), 0 0 0 33px hsl(300, 3%, 92%), 0 0 0 34px hsl(300, 3%, 93%), 0 0 0 35px hsl(300, 3%, 94%), 0 0 0 36px hsl(300, 3%, 95%), 0 0 0 37px hsl(300, 3%, 96%), 0 0 0 38px hsl(300, 3%, 97%), 0 0 0 39px hsl(300, 3%, 60%), 0 0 0 40px hsl(300, 3%, 61%), 0 0 0 41px hsl(300, 3%, 62%), 0 0 0 42px hsl(300, 3%, 63%), 0 0 0 43px hsl(300, 3%, 64%), 0 0 0 44px hsl(300, 3%, 65%), 0 0 0 45px hsl(300, 3%, 66%), 0 0 0 46px hsl(300, 3%, 67%), 0 0 0 47px hsl(300, 3%, 68%), 0 0 0 48px hsl(300, 3%, 69%), 0 0 0 49px hsl(300, 3%, 70%), 0 0 0 50px hsl(300, 3%, 71%), 0 0 0 51px hsl(300, 3%, 72%), 0 0 0 52px hsl(300, 3%, 73%), 0 0 0 53px hsl(300, 3%, 74%), 0 0 0 54px hsl(300, 3%, 75%), 0 0 0 55px hsl(300, 3%, 76%), 0 0 0 56px hsl(300, 3%, 77%), 0 0 0 57px hsl(300, 3%, 78%), 0 0 0 58px hsl(300, 3%, 79%), 0 0 0 59px hsl(300, 3%, 80%), 0 0 0 60px hsl(300, 3%, 81%), 0 0 0 61px hsl(300, 3%, 82%), 0 0 0 62px hsl(300, 3%, 83%), 0 0 0 63px hsl(300, 3%, 84%), 0 0 0 64px hsl(300, 3%, 85%), 0 0 0 65px hsl(300, 3%, 86%), 0 0 0 66px hsl(300, 3%, 87%), 0 0 0 67px hsl(300, 3%, 88%), 0 0 0 68px hsl(300, 3%, 89%), 0 0 0 69px hsl(300, 3%, 90%), 0 0 0 70px hsl(300, 3%, 91%), 0 0 0 71px hsl(300, 3%, 92%), 0 0 0 72px hsl(300, 3%, 93%), 0 0 0 73px hsl(300, 3%, 94%), 0 0 0 74px hsl(300, 3%, 95%), 0 0 0 75px hsl(300, 3%, 96%), 0 0 0 76px hsl(300, 3%, 97%), 0 0 0 77px hsl(300, 3%, 60%), 0 0 0 78px hsl(300, 3%, 61%), 0 0 0 79px hsl(300, 3%, 62%), 0 0 0 80px hsl(300, 3%, 63%), 0 0 0 81px hsl(300, 3%, 64%), 0 0 0 82px hsl(300, 3%, 65%), 0 0 0 83px hsl(300, 3%, 66%), 0 0 0 84px hsl(300, 3%, 67%), 0 0 0 85px hsl(300, 3%, 68%), 0 0 0 86px hsl(300, 3%, 69%), 0 0 0 87px hsl(300, 3%, 70%), 0 0 0 88px hsl(300, 3%, 71%), 0 0 0 89px hsl(300, 3%, 72%), 0 0 0 90px hsl(300, 3%, 73%), 0 0 0 91px hsl(300, 3%, 74%), 0 0 0 92px hsl(300, 3%, 75%), 0 0 0 93px hsl(300, 3%, 76%), 0 0 0 94px hsl(300, 3%, 77%), 0 0 0 95px hsl(300, 3%, 78%), 0 0 0 96px hsl(300, 3%, 79%), 0 0 0 97px hsl(300, 3%, 80%), 0 0 0 98px hsl(300, 3%, 81%), 0 0 0 99px hsl(300, 3%, 82%), 0 0 0 100px hsl(300, 3%, 83%), 0 0 0 101px hsl(300, 3%, 84%), 0 0 0 102px hsl(300, 3%, 85%), 0 0 0 103px hsl(300, 3%, 86%), 0 0 0 104px hsl(300, 3%, 87%), 0 0 0 105px hsl(300, 3%, 88%), 0 0 0 106px hsl(300, 3%, 89%), 0 0 0 107px hsl(300, 3%, 90%), 0 0 0 108px hsl(300, 3%, 91%), 0 0 0 109px hsl(300, 3%, 92%), 0 0 0 110px hsl(300, 3%, 93%), 0 0 0 111px hsl(300, 3%, 94%), 0 0 0 112px hsl(300, 3%, 95%), 0 0 0 113px hsl(300, 3%, 96%), 0 0 0 114px hsl(300, 3%, 97%); } #container185 .container185box2 { border: 1px solid rgba(212, 209, 212, 1); position: absolute; top: 15%; left: 12%; width: 24%; height: 60%; background-color: rgba(212, 209, 212, 1); } #container185 .container185box2-1 { position: relative; padding: 0px 0px 0px 0px; height: 100%; border-color: #ffffff; border-width: 1px 1px 1px 1px; border-style: groove; filter: drop-shadow(-2px -2px 2px #ffffff) drop-shadow(2px 2px 2px #d4d1d4); } #container185 .container185box3 { border: 1px solid rgba(212, 209, 212, 1); position: absolute; top: 15%; left: 38%; width: 10%; height: 60%; } #container185 .container185box3-1 { position: relative; padding: 0px 0px 0px 0px; height: 100%; border-color: #ffffff; border-width: 1px 1px 1px 1px; border-style: groove; background-color: rgba(212, 209, 212, 0.1); } #container185 .container185box4 { border: 1px solid rgba(212, 209, 212, 1); position: absolute; top: 15%; left: 50%; width: 14%; height: 60%; background-color: rgba(212, 209, 212, 1); transform: rotateZ(180deg); } #container185 .container185box4-1 { position: relative; padding: 0px 0px 0px 0px; height: 100%; border-color: #ffffff; border-width: 1px 1px 1px 1px; border-style: groove; }

[neumorphic]

Albers-part2

#container184 { position: absolute; width: 100%; height: 100%; } #container184 .container184boxholder { position: absolute; left: 0%; top: 10%; width: 80%; height: 80%; } #container184 .container184box1 { position: absolute; top: 19%; left: 20%; width: 70%; } #container184 .container184box1-1 { position: relative; padding: 4px 0px 0px 0px; border-color: #ffffff transparent transparent #ffffff; border-width: 4px 4px 0px 4px; border-style: groove; background-color: rgba(212, 209, 212, 0.1); } #container184 .container184box2 { position: absolute; left: 10%; top: 19%; padding: 4px 0px 0px 0px; width: 100px; height: 100px; background-color: rgba(212, 209, 212, 1); border-color: #ffffff; border-width: 4px; border-style: groove; } #container184 .container184box2-1 { position: absolute; padding: 4px 0px 0px 0px; width: 100px; height: 100px; background-color: rgba(212, 209, 212, 1); border-color: #ffffff; border-width: 4px; border-style: groove; box-shadow: 5px 5px 20px #d4d1d4, -5px -5px 20px #ffffff; } #container184 .container184box3 { position: absolute; overflow: hidden; top: 19%; left: 80%; width: 90%; } #container184 .container184box3-1 { position: relative; padding: 0px 0px 4px 0px; border-color: transparent transparent #ffffff transparent; border-width: 0px 0px 4px 4px; border-style: groove; }

[neumorphic]

Albers-part1

#container183 { position: absolute; width: 100%; height: 100%; } #container183 .container183boxholder { position: absolute; left: 0%; top: 10%; width: 80%; height: 80%; } #container183 .container183box1 { position: absolute; overflow: hidden; top: 25%; left: 20%; width: 70%; background-color: rgba(212, 209, 212, 1); } #container183 .container183box1-1 { position: relative; padding: 4px 0px 0px 0px; border-color: #ffffff #ffffff transparent transparent; border-width: 4px 4px 0px 4px; border-style: groove; background-color: rgba(212, 209, 212, 0.1); } #container183 .container183box2 { position: absolute; overflow: hidden; top: 25%; left: 70%; height: 50%; } #container183 .container183box2-1 { position: relative; padding: 0px 0px 0px 0px; border-color: transparent transparent transparent #ffffff; border-width: 4px 0px 4px 4px; border-style: groove; } #container183 .container183box3 { position: absolute; overflow: hidden; top: 19%; left: -40%; width: 90%; } #container183 .container183box3-1 { position: relative; padding: 0px 0px 4px 0px; border-color: transparent transparent #ffffff transparent; border-width: 0px 4px 4px 0px; border-style: groove; } #container183 .container183box4 { border: 1px solid rgba(212, 209, 212, 1); position: absolute; top: 15%; left: 30%; width: 14%; height: 60%; background-color: rgba(212, 209, 212, 1); } #container183 .container183box4-1 { position: relative; padding: 0px 0px 0px 0px; height: 100%; border-color: #ffffff; border-width: 1px 1px 1px 1px; border-style: groove; } #container183 .container183box5 { border: 1px solid rgba(212, 209, 212, 1); position: absolute; top: 15%; left: 10%; width: 14%; height: 60%; background-color: rgba(212, 209, 212, 1); } #container183 .container183box5-1 { position: relative; padding: 0px 0px 0px 0px; height: 100%; border-color: #ffffff; border-width: 1px 1px 1px 1px; border-style: groove; }

[neumorphic]

fleur 1

#container124 { position: absolute; overflow: hidden; width: 100%; height: 100%; box-sizing: border-box; perspective: 500px; } #container124 #container124box1 { position: absolute; left: 32%; top: 35%; width: 30%; height: 30%; transform-style: preserve-3d; filter: drop-shadow(-2px -2px 10px #ffffff) drop-shadow(10px 10px 10px #d4d1d4); box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.5), 5px 5px 10px rgba(0, 0, 0, 0.5); } #container124 .container124box2 { position: absolute; padding: 0px 0px 8px 0px; left: -2%; top: -5%; width: 105%; height: 105%; background-color: rgba(0, 0, 0, 0.08); border-width: 1px 1px 10px 0px; border-style: solid solid outset solid; border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1); border-radius: 100% 100% 100% 50%; transform: rotate(1000deg); }

[neumorphic]

Mound 21

#container179 { position: absolute; overflow: hidden; width: 100%; height: 100%; box-sizing: border-box; } #container179 .container179boxholder1 { position: absolute; left: 10%; top: 10%; width: 40%; height: 40%; box-sizing: border-box; border-radius: 100% 0% 0% 0%; filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.6)); } #container179 .container179boxholder2 { position: absolute; left: 50%; top: 10%; width: 40%; height: 40%; box-sizing: border-box; border-radius: 0% 100% 0% 0%; filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.6)); } #container179 .container179boxholder3 { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; box-sizing: border-box; border-radius: 0% 0% 100% 0%; filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.6)); } #container179 .container179boxholder4 { position: absolute; left: 10%; top: 50%; width: 40%; height: 40%; box-sizing: border-box; border-radius: 0% 0% 0% 100%; filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.6)); } #container179 .container179boxes { position: relative; width: 100%; height: 100%; box-sizing: border-box; background-image: linear-gradient(0deg, transparent 0%, #ffffff 48%, #ffffff 52%, transparent 100%); background-position: 0px 0px; background-size: 40px 40px; } #container179 .container179boxes1 { padding: 10px 0px 0px 10px; border-radius: 100% 0% 0% 0%; filter: drop-shadow(-2px -2px 1px #333333); transform: rotate(20deg); } #container179 .container179boxes2 { padding: 10px 10px 0px 0px; border-radius: 0% 100% 0% 0%; filter: drop-shadow(2px -2px 1px #333333); } #container179 .container179boxes3 { padding: 0px 10px 10px 0px; border-radius: 0% 0% 100% 0%; filter: drop-shadow(2px 2px 1px #333333); } #container179 .container179boxes4 { padding: 0px 0px 10px 10px; border-radius: 0% 0% 0% 100%; filter: drop-shadow(-2px 2px 1px #333333); }

[neumorphic]

Space time donuts 3

#container180 { position: absolute; width: 100%; height: 100%; box-sizing: border-box; } #container180 #container180box1 { position: absolute; left: 20%; top: 10%; width: 60%; height: 20%; border: 4px double rgba(0, 0, 0, 1); filter: invert(90%); transform: scale(0.8, 0.8); } #container180 .container180box2 { position: relative; padding: 5px; border-width: 10px 2px 1px 2px; border-style: solid; border-color: rgba(212, 209, 212, 0.3) rgba(212, 209, 212, 0.4) rgba(212, 209, 212, 0.5) rgba(212, 209, 212, 0.4); border-radius: 100%; transform: rotate(50deg); box-sizing: border-box; box-shadow: 0 0 50px rgba(212, 209, 212, 0.8); }

[neumorphic]

Sandstorm 1

#container181 { position: absolute; width: 100%; height: 100%; } #container181 .container181boxholder { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; } #container181 .container181box1 { position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; } #container181 .container181box1-1 { position: relative; box-sizing: border-box; border-color: rgba(255, 255, 255, 1); border-style: inset; transform: rotate(5deg); filter: drop-shadow(10px 10px 100px rgba(212, 209, 212, 0.8)); padding: 5px 5px 5px 5px; border-width: 10px 10px 0px 0px; }

[neumorphic]

Unknown Device 2

#container120 { position: absolute; overflow: hidden; left: 0%; top: 0%; width: 100%; height: 100%; } #container120 .container120boxes { position: absolute; box-sizing: border-box; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.4), inset -2px -2px 2px 0px rgba(255, 255, 255, 0.5); background: linear-gradient(145deg, #d4d1d4, #333333, #d4d1d4); background-size: 10% 20%; } #container120 #container120box0 { left: 24%; top: 14%; width: 52%; height: 72%; border-width: 10px; border-style: ridge; border-color: #d4d1d4 #b4b1b4 #b4b1b4 #d4d1d4; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.4), inset -2px -2px 2px 0px rgba(255, 255, 255, 0.4), 4px 4px 4px 0px rgba(0, 0, 0, 0.4), -4px -4px 4px 0px rgba(255, 255, 255, 0.4); background-color: #d4d1d4; background-image: linear-gradient(0deg, transparent 10%, transparent 11%, transparent 89%, transparent 90%), linear-gradient(-90deg, transparent 10%, transparent 11%, transparent 89%, transparent 90%), linear-gradient(-45deg, #ffffff 39%, transparent 40%, transparent 60%, #ffffff 61%), linear-gradient(45deg, transparent 39%, transparent 40%, transparent 60%, transparent 61%); background-position: 0px 0px, 0px 0px; background-size: 10% 10%; -webkit-animation: container120animation0 10s infinite; -moz-animation: container120animation0 5s infinite; animation: container120animation0 10s linear infinite; } @-webkit-keyframes container120animation0 { 0% { background-position: 0% 0%; } 100% { background-position: 400% 0%; } } @-moz-keyframes container120animation0 { 0% { background-position: 0% 0%; } 100% { background-position: 400% 0%; } } @keyframes container120animation0 { 0% { background-position: 0% 0%; } 100% { background-position: 400% 0%; } } #container120 #container120box1 { overflow: clip; left: 10%; top: 10%; width: 80%; height: 60%; background-color: #ffffff; background-image: linear-gradient(0deg, transparent 44%, #333333 45%, #333333 55%, transparent 56%), linear-gradient(90deg, transparent 44%, #333333 45%, #333333 55%, transparent 56%); background-position: 0px 0px, 0px 0px; background-size: 10% 10%; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.4), inset -2px -2px 2px 0px rgba(255, 255, 255, 0.5), 4px 4px 4px 0px rgba(0, 0, 0, 0.4), -4px -4px 4px 0px rgba(255, 255, 255, 0.4); -webkit-animation: container120animation0 10s infinite; -moz-animation: container120animation0 5s infinite; animation: container120animation0 10s linear infinite; } #container120 #container120box2 { left: 0%; top: 10%; width: 100%; height: 20%; background-color: #ffffff; background-image: linear-gradient(0deg, #ffffff 10%, transparent 11%, transparent 89%, #ffffff 90%), linear-gradient(-90deg, #ffffff 10%, transparent 11%, transparent 89%, #ffffff 90%), linear-gradient(-45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%), linear-gradient(45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%); background-position: 0px 0px, 0px 0px; background-size: 20% 200%; -webkit-animation: container120animation2 5s infinite; -moz-animation: container120animation2 5s infinite; animation: container120animation2 10s linear infinite; } @-webkit-keyframes container120animation2 { 0% { background-position: 500% 20%; } 100% { background-position: 0% 20%; } } @-moz-keyframes container120animation2 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } @keyframes container120animation2 { 0% { background-position: 500% 70%; } 100% { background-position: 0% 70%; } } #container120 #container120box3 { left: 0%; top: 40%; width: 100%; height: 20%; background-color: #ffffff; background-image: linear-gradient(-45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%), linear-gradient(45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%); background-position: 0px 0px, 0px 0px; background-size: 20% 20%; -webkit-animation: container120animation3 5s infinite; -moz-animation: container120animation3 5s infinite; animation: container120animation3 5s linear infinite; } @-webkit-keyframes container120animation3 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } @-moz-keyframes container120animation3 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } @keyframes container120animation3 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } #container120 #container120box4 { left: 0%; top: 80%; width: 100%; height: 20%; background-color: #ffffff; background-image: linear-gradient(-45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%), linear-gradient(45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%); background-position: 0px 0px, 0px 0px; background-size: 10% 10%; -webkit-animation: container120animation4 10s infinite; -moz-animation: container120animation4 5s infinite; animation: container120animation4 10s linear infinite; } @-webkit-keyframes container120animation4 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } @-moz-keyframes container120animation4 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } @keyframes container120animation4 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } #container120 #container120box5 { left: 0%; top: 60%; width: 100%; height: 20%; background-image: linear-gradient(-45deg, #d4d1d4 39%, transparent 40%, transparent 60%, #d4d1d4 61%), linear-gradient(45deg, #d4d1d4 39%, transparent 40%, transparent 60%, #d4d1d4 61%); background-position: 0px 0px, 0px 0px; background-size: 10% 100%; -webkit-animation: container120animation5 10s infinite; -moz-animation: container120animation5 10s infinite; animation: container120animation5 10s linear infinite; } @-webkit-keyframes container120animation5 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } @-moz-keyframes container120animation5 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } @keyframes container120animation5 { 0% { background-position: 500% 0%; } 100% { background-position: 0% 0%; } } #container120 #container120box6 { left: 10%; top: 70%; width: 80%; height: 20%; border-radius: 0% 0% 30% 30%; background-color: #ffffff; background-image: linear-gradient(0deg, #ffffff 10%, transparent 11%, transparent 89%, #ffffff 90%), linear-gradient(-90deg, #ffffff 10%, transparent 11%, transparent 89%, #ffffff 90%), linear-gradient(-45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%), linear-gradient(45deg, transparent 39%, #333333 40%, #333333 60%, transparent 61%); background-position: 0px 0px, 0px 0px; background-size: 10% 10%; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.4), inset -2px -2px 2px 0px rgba(255, 255, 255, 0.5), 4px 4px 4px 0px rgba(0, 0, 0, 0.4), -4px -4px 4px 0px rgba(255, 255, 255, 0.4); -webkit-animation: container120animation0 10s infinite; -moz-animation: container120animation0 10s infinite; animation: container120animation0 10s linear infinite; }

[neumorphic]

For Albers 4

#container171 { position: absolute; width: 100%; height: 100%; } #container171 .container171boxholder { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } #container171 .container171box1 { position: absolute; width: 100%; height: 100%; background-color: rgba(212, 209, 212, 0.2); border-color: #ffffff; border-width: 2px; border-style: groove; } #container171 .container171box2 { position: absolute; bottom: -3px; left: 0px; width: 100%; height: 100px; background-color: rgba(212, 209, 212, 0.4); border-color: #eeeeee; border-width: 2px; border-style: groove; } #container171 .container171box3 { position: absolute; bottom: 0px; right: 0%; width: 100px; height: 100%; background-color: rgba(0, 0, 0, 0.6); border-color: #dddddd; border-width: 2px; border-style: groove; }

[neumorphic]

Lines 8

#container178 { position: absolute; width: 100%; height: 100%; } #container178 .container178boxholder { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; } #container178 .container178box1 { position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; } #container178 .container178box1-1 { position: relative; box-sizing: border-box; border-color: rgba(255, 255, 255, 1); border-style: double; transform: rotate(90deg); filter: drop-shadow(-10px -10px 0px rgba(255, 255, 255, 0.3)) drop-shadow(10px 10px 0px rgba(212, 209, 212, 0.3)); padding: 20px 20px 5px 5px; border-width: 0px 10px 0px 1px; }

[neumorphic]

Circles 8

#container177 { position: absolute; width: 100%; height: 100%; } #container177 .container177boxholder { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; } #container177 .container177box1 { position: absolute; overflow: hidden; top: 25%; left: 25%; width: 50%; height: 50%; background-color: #000000; border-color: #ffffff; border-style: solid; border-radius: 100%; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.4), inset -2px -2px 2px 0px rgba(255, 255, 255, 0.4), 4px 4px 4px 0px rgba(0, 0, 0, 0.4), -4px -4px 4px 0px rgba(255, 255, 255, 0.4); } #container177 .container177boxes { position: relative; box-sizing: border-box; border-color: rgba(255, 255, 255, 0.7); border-style: dotted; transform: rotate(-90deg); } #container177 .container177box1-1 { -moz-animation: container177glow 5s ease-in-out infinite alternate; -webkit-animation: container177glow 5s ease-in-out infinite alternate; animation: container177glow 5s ease-in-out infinite alternate; } #container177 .container177box1-2 { -moz-animation: container177glow 10s ease-in-out infinite alternate; -webkit-animation: container177glow 10s ease-in-out infinite alternate; animation: container177glow 10s ease-in-out infinite alternate; } #container177 .container177box1-3 { -moz-animation: container177glow 7s ease-in-out infinite alternate; -webkit-animation: container177glow 7s ease-in-out infinite alternate; animation: container177glow 7s ease-in-out infinite alternate; } #container177 .container177box1-4 { -moz-animation: container177glow 2s ease-in-out infinite alternate; -webkit-animation: container177glow 2s ease-in-out infinite alternate; animation: container177glow 2s ease-in-out infinite alternate; } #container177 .container177box1-5 { -moz-animation: container177glow 4s ease-in-out infinite alternate; -webkit-animation: container177glow 4s ease-in-out infinite alternate; animation: container177glow 4s ease-in-out infinite alternate; } #container177 .container177box1-6 { -moz-animation: container177glow 11s ease-in-out infinite alternate; -webkit-animation: container177glow 11s ease-in-out infinite alternate; animation: container177glow 11s ease-in-out infinite alternate; } #container177 .container177box1-7 { -moz-animation: container177glow 3s ease-in-out infinite alternate; -webkit-animation: container177glow 3s ease-in-out infinite alternate; animation: container177glow 3s ease-in-out infinite alternate; } #container177 .container177box1-8 { -moz-animation: container177glow 6s ease-in-out infinite alternate; -webkit-animation: container177glow 6s ease-in-out infinite alternate; animation: container177glow 6s ease-in-out infinite alternate; } #container177 .container177box1-9 { -moz-animation: container177glow 15s ease-in-out infinite alternate; -webkit-animation: container177glow 15s ease-in-out infinite alternate; animation: container177glow 15s ease-in-out infinite alternate; } #container177 .container177box1-10 { -moz-animation: container177glow 2s ease-in-out infinite alternate; -webkit-animation: container177glow 2s ease-in-out infinite alternate; animation: container177glow 2s ease-in-out infinite alternate; } @keyframes container177glow { 0% { filter: drop-shadow(-2px -2px 1px rgba(255, 255, 255, 0.2)) drop-shadow(2px 2px 1px rgba(212, 209, 212, 0.2)) invert(0%); padding: -10px 10px -5px 10px; border-width: 0px 100px 20px 1px; } 50% { filter: drop-shadow(-6px -6px 1px rgba(255, 255, 255, 0.2)) drop-shadow(6px 6px 1px rgba(212, 209, 212, 0.2)) invert(0%); padding: 0px 0px 5px 10px; border-width: 50px 1px 0px 60px; } 100% { filter: drop-shadow(-2px -2px 1px rgba(255, 255, 255, 0.2)) drop-shadow(2px 2px 1px rgba(212, 209, 212, 0.2)) invert(0%); padding: 10px -10px -5px 10px; border-width: 0px 100px 20px 1px; } }

[neumorphic]

Circles 7

#container172 { position: absolute; width: 100%; height: 100%; box-sizing: border-box; } #container172 #b1 { position: relative; left: 45%; top: 45%; width: 10%; height: 10%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIj4KICAgIDxmaWx0ZXIgaWQ9Im5vaXNlIiB4PSIwIiB5PSIwIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgICAgPGZlQmxlbmQgbW9kZT0ic2NyZWVuIi8+CiAgICA8L2ZpbHRlcj4KICAgIDxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+'); padding: 0px; box-sizing: border-box; border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIj4KICAgIDxmaWx0ZXIgaWQ9Im5vaXNlIiB4PSIwIiB5PSIwIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgICAgPGZlQmxlbmQgbW9kZT0ic2NyZWVuIi8+CiAgICA8L2ZpbHRlcj4KICAgIDxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+') 30 round; border-width: 10px; border-style: solid solid solid solid; border-color: rgba(255, 255, 255, 1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 1) rgba(0, 0, 0, 1); border-radius: 50% 50% 50% 50%; box-shadow: -100px 0px 0px 10px hsl(300, 3%, 100%), -100px 0px 10px 10px hsl(300, 3%, 30%), -90px 0px 0px 10px hsl(300, 3%, 100%), -90px 0px 50px 10px hsl(300, 3%, 30%), -80px 0px 0px 10px hsl(300, 3%, 100%), -80px 0px 50px 10px hsl(300, 3%, 30%), -70px 0px 0px 10px hsl(300, 3%, 100%), -70px 0px 50px 10px hsl(300, 3%, 30%), -60px 0px 0px 10px hsl(300, 3%, 100%), -60px 0px 50px 10px hsl(300, 3%, 30%), -50px 0px 0px 10px hsl(300, 3%, 100%), -50px 0px 50px 10px hsl(300, 3%, 30%), -40px 0px 0px 10px hsl(300, 3%, 100%), -40px 0px 50px 10px hsl(300, 3%, 30%), -30px 0px 0px 10px hsl(300, 3%, 100%), -30px 0px 50px 10px hsl(300, 3%, 30%), -20px 0px 0px 10px hsl(300, 3%, 100%), -20px 0px 50px 10px hsl(300, 3%, 30%), -10px 0px 0px 10px hsl(300, 3%, 100%), -10px 0px 50px 10px hsl(300, 3%, 30%), -0px 0px 0px 10px hsl(300, 3%, 100%), -0px 0px 50px 10px hsl(300, 3%, 30%), 10px 0px 0px 10px hsl(300, 3%, 100%), 10px 0px 50px 10px hsl(300, 3%, 30%), 20px 0px 0px 10px hsl(300, 3%, 100%), 20px 0px 50px 10px hsl(300, 3%, 30%), 30px 0px 0px 10px hsl(300, 3%, 100%), 30px 0px 50px 10px hsl(300, 3%, 30%), 40px 0px 0px 10px hsl(300, 3%, 100%), 40px 0px 50px 10px hsl(300, 3%, 30%), 50px 0px 0px 10px hsl(300, 3%, 100%), 50px 0px 50px 10px hsl(300, 3%, 30%), 60px 0px 0px 10px hsl(300, 3%, 100%), 60px 0px 50px 10px hsl(300, 3%, 30%), 70px 0px 0px 10px hsl(300, 3%, 100%), 70px 0px 50px 10px hsl(300, 3%, 30%), 80px 0px 0px 10px hsl(300, 3%, 100%), 80px 0px 50px 10px hsl(300, 3%, 30%), 90px 0px 0px 10px hsl(300, 3%, 100%), 90px 0px 50px 10px hsl(300, 3%, 30%), 100px 0px 0px 10px hsl(300, 3%, 100%), 100px 0px 50px 10px hsl(300, 3%, 30%); }

[neumorphic]

Singularity 2

#container175 { width: 100%; height: 100%; } #container175 .box0 { position: absolute; overflow: hidden; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 100%; box-sizing: border-box; filter: invert(100%); animation: container175glow 5s ease-in-out infinite alternate; } #container175 .box1 { position: absolute; overflow: hidden; left: 30%; top: 30%; width: 40%; height: 40%; border-width: 20px; border-style: solid; border-color: transparent rgba(212, 209, 212, 0.1) rgba(212, 209, 212, 0.1) transparent; box-sizing: border-box; filter: invert(100%); } @keyframes container175glow { 0% { box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.1); } 25% { box-shadow: 0px 0px 50px 50px rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0px 0px 100px 25px rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0px 0px 50px 50px rgba(255, 255, 255, 0.4); } 100% { box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.1); } } #container175 .box2 { background-color: #ffffff; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; box-sizing: border-box; border-width: 5px; border-style: solid; border-color: transparent rgba(212, 209, 212, 0.1) transparent transparent; box-sizing: border-box; filter: invert(100%); } #container175 .box3 { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; border-width: 50px; border-style: solid; border-color: rgba(212, 209, 212, 0.1) transparent transparent transparent; box-sizing: border-box; filter: invert(100%); } @keyframes container175spin { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } }

[neumorphic]

Console

#container174 { position: absolute; width: 100%; height: 100%; } #container174 .container174boxholder { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } #container174 .container174box1 { position: relative; width: 100%; height: 100%; border-width: 2px; border-style: solid; border-color: #d4d1d4; filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.3)); }

[neumorphic]

Reach 2

#container176 { width: 100%; height: 100%; box-sizing: border-box; } #container176 #container176box1 { position: absolute; left: 0%; top: 15%; width: 70%; height: 70%; } #container176 .container176box2 { position: absolute; border-radius: 100% 0 0 0; left: 50%; top: 5%; width: 80%; height: 80%; box-shadow: 5px 5px 10px #d4d1d4; -webkit-animation: container176spin1 20s ease-in-out infinite; animation: container176spin1 20s ease-in-out infinite; z-index: 100; } @-webkit-keyframes container176spin1 { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } @keyframes container176spin1 { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } }

[neumorphic]

Diffuse 1

#container173 { width: 100%; height: 100%; box-sizing: border-box; } #container173 #box1 { position: absolute; left: 60%; top: 40%; width: 20%; height: 20%; } #container173 .container173box2 { position: absolute; left: 0%; top: 0%; width: 105%; height: 105%; border-width: 64px 16px 4px 1px; border-style: solid; border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) rgba(212, 209, 212, 0.1) rgba(255, 255, 255, 0.1); border-radius: 100% 0 0% 100%; transform: rotate(45deg); box-shadow: 20px 20px 40px #d4d1d4; }

[neumorphic]

Triangles 4

#container170 { position: absolute; width: 100%; height: 100%; } #container170 .container170boxholder { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } #container170 .container170boxes { position: relative; float: left; width: 0px; height: 0px; border-width: 20px; border-style: solid; } #container170 .container170box1 { -webkit-animation: container170a1 10s linear infinite; -moz-animation: container170a1 10s linear infinite; animation: container170a1 10s linear infinite; } #container170 .container170box3 { -webkit-animation: container170a1 12s linear infinite; -moz-animation: container170a1 12s linear infinite; animation: container170a1 12s linear infinite; } #container170 .container170box4 { -webkit-animation: container170a1 14s linear infinite; -moz-animation: container170a1 14s linear infinite; animation: container170a1 14s linear infinite; } #container170 .container170box2 { -webkit-animation: container170a1 16s linear infinite; -moz-animation: container170a1 16s linear infinite; animation: container170a1 16s linear infinite; } @-webkit-keyframes container170a1 { 0% { border-color: #f9f6f9 #333333 #333333 #f9f6f9; } 25% { border-color: #f9f6f9 #f9f6f9 #333333 #333333; } 50% { border-color: #333333 #f9f6f9 #f9f6f9 #333333; } 75% { border-color: #333333 #333333 #f9f6f9 #f9f6f9; } 100% { border-color: #f9f6f9 #333333 #333333 #f9f6f9; } } @-moz-keyframes container170a1 { 0% { border-color: #f9f6f9 #f9f6f9 #333333 #333333; } 25% { border-color: #333333 #f9f6f9 #f9f6f9 #333333; } 50% { border-color: #333333 #333333 #f9f6f9 #f9f6f9; } 75% { border-color: #f9f6f9 #333333 #333333 #f9f6f9 ; } 100% { border-color: #f9f6f9 #f9f6f9 #333333 #333333; } } @keyframes container170a1 { 0% { border-color: #333333 #f9f6f9 #f9f6f9 #333333; } 25% { border-color: #333333 #333333 #f9f6f9 #f9f6f9; } 50% { border-color: #f9f6f9 #333333 #333333 #f9f6f9; } 75% { border-color: #f9f6f9 #f9f6f9 #333333 #333333; } 100% { border-color: #333333 #f9f6f9 #f9f6f9 #333333; } }