Card by adamgiebl

1.card {
2  --background: linear-gradient(to left, #a5c1e7 0%, #9b59b6 100%);
3  width: 200px;
4  height: 270px;
5  padding: 10px;
6  border-radius: 1rem;
7  overflow: visible;
8  background: #a5c1e7;
9  background: var(--background);
10  position: relative;
11  z-index: 1;
12}
13
14.card::after {
15  position: absolute;
16  content: "";
17  top: 40px;
18  left: 0;
19  right: 0;
20  z-index: -1;
21  height: 100%;
22  width: 100%;
23  transform: scale(0.85);
24  filter: blur(30px);
25  background: #a5c1e7;
26  background: var(--background);
27  transition: opacity 0.5s;
28}
29
30.card-info {
31  --color: #ffffff;
32  background: var(--color);
33  color: var(--color);
34  display: flex;
35  justify-content: center;
36  align-items: center;
37  width: 100%;
38  height: 100%;
39  overflow: visible;
40  border-radius: 0.6rem;
41}
42
43.card .title {
44  font-weight: bold;
45  letter-spacing: 0.2em;
46  text-align: center;
47}
48
49/*Hover*/
50.card:hover::after {
51  opacity: 0;
52}
53
54.card:hover .card-info {
55  color: #a5c1e7;
56  transition: color 1s;
57}
58