#212121
1.card { 2 position: relative; 3 width: 190px; 4 height: 254px; 5 background: #f4f4f4; 6 z-index: 1; 7 border-radius: 21px; 8 overflow: hidden; 9} 10 11.card__content { 12 background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25)); 13 z-index: 1; 14 backdrop-filter: blur(30px); 15 -webkit-backdrop-filter: blur(20px); 16 position: absolute; 17 left: 0; 18 top: 0; 19 width: 100%; 20 height: 100%; 21 border-radius: 21px; 22} 23 24.card .blob { 25 position: absolute; 26 z-index: -1; 27 border-radius: 5em; 28 width: 200px; 29 height: 200px; 30} 31 32.card .blob:nth-child(2) { 33 left: -50px; 34 top: -90px; 35 background: #08b2e3; 36} 37 38.card .blob:nth-child(3) { 39 left: 110px; 40 top: -20px; 41 z-index: -1; 42 background: #ea4769; 43} 44 45.card .blob:nth-child(4) { 46 left: -40px; 47 top: 100px; 48 background: #fcde39; 49} 50 51.card .blob:nth-child(5) { 52 left: 100px; 53 top: 180px; 54 background: #9b4c97; 55} 56 57.card__text { 58 position: absolute; 59 top: 50%; 60 left: 50%; 61 transform: translate(-50%, -50%); 62 color: #fff; 63 font-size: 20px; 64 font-weight: bold; 65 text-align: center; 66 text-shadow: 0px 0px 10px rgba(0,0,0,0.75); 67} 68
450 views
Variation of acard
450 views
Variation of acard
Comments
MIT License