Card by adamgiebl

1.card {
2  position: relative;
3  width: 190px;
4  height: 254px;
5  background: lightgrey;
6  box-shadow: 12px 12px 20px -12px rgba(0,0,0,0.75);
7  z-index: 1;
8  border-radius: 21px;
9  overflow: hidden;
10  transform: rotate(-2deg);
11}
12
13.card__content {
14  background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
15  z-index: 1;
16  backdrop-filter: blur(20px);
17  -webkit-backdrop-filter: blur(20px);
18  position: absolute;
19  left: 0;
20  top: 0;
21  width: 100%;
22  height: 100%;
23  border-radius: 21px;
24}
25
26.blob {
27  position: absolute;
28  z-index: -1;
29  border-radius: 50%;
30  width: 150px;
31  height: 150px;
32  filter: blur(15px);
33  opacity: 0.5;
34}
35
36.blob-1 {
37  left: -65px;
38  top: -45px;
39  background: #59C173;
40  /* fallback for old browsers */
41  background: -webkit-linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);
42  /* Chrome 10-25, Safari 5.1-6 */
43  background: linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);
44 /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
45  transform: rotate(12deg);
46}
47
48.blob-2 {
49  left: -30px;
50  top: 120px;
51  background: #A8EB12;
52 /* fallback for old browsers */
53  background: -webkit-linear-gradient(to bottom, #54C0EC, #A8EB12);
54  /* Chrome 10-25, Safari 5.1-6 */
55  background: linear-gradient(to bottom, #54C0EC, #A8EB12);
56 /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
57  transform: rotate(20deg);
58}
59
60.blob-3 {
61  right: -60px;
62  bottom: -10px;
63  background: #CC2E5C;
64 /* fallback for old browsers */
65  background: -webkit-linear-gradient(to bottom, #753a88, #CC2E5C);
66  /* Chrome 10-25, Safari 5.1-6 */
67  background: linear-gradient(to bottom, #753a88, #CC2E5C);
68 /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
69  transform: rotate(-10deg);
70}
71
72.blob-4 {
73  right: -70px;
74  top: 20px;
75  background: #FFA17F;
76 /* fallback for old browsers */
77  background: -webkit-linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);
78  /* Chrome 10-25, Safari 5.1-6 */
79  background: linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);
80 /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
81  transform: rotate(-25deg);
82}