Card by SteveBloX

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