Neumorphism UI | 2020 Trend

        div {
            border-radius: 5px;
            box-shadow: -4px -4px 16px #ffffff, 3px 3px 16px #a3b1c6;
        }
        

            div {
                border-radius: 50%;
                box-shadow: inset -5px -5px 16px #ffffff, inset 5px 5px 16px #aeaec0;
            }
            

            div {
                transform: rotate(45deg);
                box-shadow: inset -4px -4px 10px #aeaec0, inset 4px 4px 30px #ffffff;
            }
            

            div {
                display: flex;
                border-radius: 50%;
                justify-content: center;
                align-items: center;
                position: relative;
                box-shadow: -4px -4px 16px #ffffff, 4px 4px 16px #aeaec0;
            }
            div::after {
                content: '';
                position: absolute;
                border-radius: 50%;
                width: 80%;
                height: 80%;
                background-color: transparent;
                box-shadow: inset -4px -4px 16px #ffffff, inset 4px 4px 16px #aeaec0;
            }
            

            div {
                box-shadow: -4px -4px 16px #ffffff, 3px 3px 16px #a3b1c6;
                animation: rotate-animation infinite 20s linear;
            }
            @keyframes rotate-animation {
                from {
                  transform: rotate(0deg);
                }
                to {
                  transform: rotate(360deg);
                }
              }