#ffffff
1.card { 2 position: relative; 3 width: 190px; 4 height: 254px; 5 background: lightgrey; 6 box-shadow: #d11bff42 0 15px 40px -5px; 7 z-index: 1; 8 border-radius: 21px; 9 overflow: hidden; 10} 11 12.card__content { 13 background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25)); 14 z-index: 1; 15 backdrop-filter: blur(20px); 16 -webkit-backdrop-filter: blur(20px); 17 position: absolute; 18 left: 0; 19 top: 0; 20 width: 100%; 21 height: 100%; 22 border-radius: 21px; 23} 24 25.card .blob { 26 position: absolute; 27 z-index: -1; 28 border-radius: 5em; 29 width: 200px; 30 height: 200px; 31} 32 33.card .blob:nth-child(2) { 34 left: -50px; 35 top: -90px; 36 background: #ff930f; 37} 38 39.card .blob:nth-child(3) { 40 left: 110px; 41 top: -20px; 42 z-index: -1; 43 background: #bf0fff; 44} 45 46.card .blob:nth-child(4) { 47 left: -40px; 48 top: 100px; 49 background: #ff1b6b; 50} 51 52.card .blob:nth-child(5) { 53 left: 100px; 54 top: 180px; 55 background: #0061ff; 56}
Comments
Variations
3 MIT License