Card by Spacious74

1.outer {
2  width: 300px;
3  height: 250px;
4  border-radius: 10px;
5  padding: 1px;
6  background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);
7  position: relative;
8}
9
10.dot {
11  width: 5px;
12  aspect-ratio: 1;
13  position: absolute;
14  background-color: #fff;
15  box-shadow: 0 0 10px #ffffff;
16  border-radius: 100px;
17  z-index: 2;
18  right: 10%;
19  top: 10%;
20  animation: moveDot 6s linear infinite;
21}
22
23@keyframes moveDot {
24  0%,
25  100% {
26    top: 10%;
27    right: 10%;
28  }
29  25% {
30    top: 10%;
31    right: calc(100% - 35px);
32  }
33  50% {
34    top: calc(100% - 30px);
35    right: calc(100% - 35px);
36  }
37  75% {
38    top: calc(100% - 30px);
39    right: 10%;
40  }
41}
42
43.card {
44  z-index: 1;
45  width: 100%;
46  height: 100%;
47  border-radius: 9px;
48  border: solid 1px #202222;
49  background-size: 20px 20px;
50  background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);
51  display: flex;
52  align-items: center;
53  justify-content: center;
54  position: relative;
55  flex-direction: column;
56  color: #fff;
57}
58.ray {
59  width: 220px;
60  height: 45px;
61  border-radius: 100px;
62  position: absolute;
63  background-color: #c7c7c7;
64  opacity: 0.4;
65  box-shadow: 0 0 50px #fff;
66  filter: blur(10px);
67  transform-origin: 10%;
68  top: 0%;
69  left: 0;
70  transform: rotate(40deg);
71}
72
73.card .text {
74  font-weight: bolder;
75  font-size: 4rem;
76  background: linear-gradient(45deg, #000000 4%, #fff, #000);
77  background-clip: text;
78  color: transparent;
79}
80
81.line {
82  width: 100%;
83  height: 1px;
84  position: absolute;
85  background-color: #2c2c2c;
86}
87.topl {
88  top: 10%;
89  background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%);
90}
91.bottoml {
92  bottom: 10%;
93}
94.leftl {
95  left: 10%;
96  width: 1px;
97  height: 100%;
98  background: linear-gradient(180deg, #747474 30%, #222424 70%);
99}
100.rightl {
101  right: 10%;
102  width: 1px;
103  height: 100%;
104}
105