1 
 2<div class="grid"></div>
 3<div id="poda">
 4  <div class="glow"></div>
 5  <div class="darkBorderBg"></div>
 6  <div class="darkBorderBg"></div>
 7  <div class="darkBorderBg"></div>
 8 
 9  <div class="white"></div>
10 
11  <div class="border"></div>
12  <div class="neon-card-wrapper">
13    <!-- Outer effect layer -->
14    <div class="card-glow"></div>
15    <div class="card-darkBorderBg"></div>
16    <div class="card-white"></div>
17    <div class="card-border"></div>
18 
19    <!-- Content inside -->
20    <div class="card-content">
21      <div class="profile-top">
22        <img
23          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
24          alt="Agent" class="profile-img" />
25        <div class="profile-info">
26          <h3>Nyx Virell</h3>
27          <p>Cyber Operative</p>
28          <span class="status">ONLINE</span>
29        </div>
30      </div>
31 
32      <div class="stat-label">
33        <span>Neural Sync</span>
34        <span>78%</span>
35      </div>
36      <div class="stat-bar">
37        <div class="stat-fill"></div>
38      </div>
39 
40      <div class="card-actions">
41        <div class="action-btn">
42          <svg viewBox="0 0 24 24">
43            <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" />
44          </svg>
45        </div>
46        <div class="action-btn">
47          <svg viewBox="0 0 24 24">
48            <path
49              d="M21 8.5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zM12 2a3 3 0 013 3v2a3 3 0 11-6 0V5a3 3 0 013-3zm-9 9a3 3 0 013-3h2a3 3 0 110 6H3a3 3 0 01-3-3zm18 0a3 3 0 01-3-3h-2a3 3 0 110 6h2a3 3 0 013-3z" />
50          </svg>
51        </div>
52      </div>
53    </div>
54  </div>
55</div>          

  1 
  2.grid {
  3  height: 800px;
  4  width: 800px;
  5  background-image:
  6    linear-gradient(to right, #0f0f10 1px, transparent 1px),
  7    linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
  8  background-size: 1rem 1rem;
  9  background-position: center center;
 10  position: absolute;
 11  z-index: -1;
 12  filter: blur(1px);
 13}
 14 
 15.white,
 16.border,
 17.darkBorderBg,
 18.glow {
 19  max-height: 70px;
 20  max-width: 314px;
 21  height: 100%;
 22  width: 100%;
 23  position: absolute;
 24  overflow: hidden;
 25  z-index: -1;
 26  /* Border Radius */
 27  border-radius: 12px;
 28  filter: blur(3px);
 29}
 30 
 31/* === Card Wrapper (Outer Effect) === */
 32.neon-card-wrapper {
 33  position: relative;
 34  width: 320px;
 35  height: 200px;
 36  display: flex;
 37  justify-content: center;
 38  align-items: center;
 39}
 40 
 41.card-glow,
 42.card-darkBorderBg,
 43.card-white,
 44.card-border {
 45  position: absolute;
 46  border-radius: 16px;
 47  overflow: hidden;
 48  z-index: -1;
 49}
 50 
 51.card-darkBorderBg {
 52  width: 332px;
 53  height: 210px;
 54}
 55 
 56.card-darkBorderBg::before {
 57  content: "";
 58  position: absolute;
 59  top: 50%;
 60  left: 50%;
 61  transform: translate(-50%, -50%) rotate(82deg);
 62  width: 600px;
 63  height: 600px;
 64  background-image: conic-gradient(rgba(0, 0, 0, 0),
 65      #18116a,
 66      rgba(0, 0, 0, 0) 10%,
 67      rgba(0, 0, 0, 0) 50%,
 68      #6e1b60,
 69      rgba(0, 0, 0, 0) 60%);
 70  transition: transform 0.6s ease;
 71}
 72 
 73.card-white {
 74  width: 327px;
 75  height: 213px;
 76  filter: blur(2px);
 77}
 78 
 79.card-white::before {
 80  content: "";
 81  position: absolute;
 82  top: 50%;
 83  left: 50%;
 84  transform: translate(-50%, -50%) rotate(83deg);
 85  width: 600px;
 86  height: 600px;
 87  background-image: conic-gradient(rgba(0, 0, 0, 0) 0%,
 88      #a099d8,
 89      rgba(0, 0, 0, 0) 8%,
 90      rgba(0, 0, 0, 0) 50%,
 91      #dfa2da,
 92      rgba(0, 0, 0, 0) 58%);
 93  filter: brightness(1.4);
 94  transition: transform 0.6s ease;
 95}
 96 
 97.card-border {
 98  width: 323px;
 99  height: 199px;
100  filter: blur(0.5px);
101}
102 
103.card-border::before {
104  content: "";
105  position: absolute;
106  top: 50%;
107  left: 50%;
108  transform: translate(-50%, -50%) rotate(70deg);
109  width: 600px;
110  height: 600px;
111  background-image: conic-gradient(#1c191c,
112      #402fb5 5%,
113      #1c191c 14%,
114      #1c191c 50%,
115      #cf30aa 60%,
116      #1c191c 64%);
117  filter: brightness(1.3);
118  transition: transform 0.6s ease;
119}
120 
121.card-glow {
122  width: 374px;
123  height: 300px;
124  filter: blur(30px);
125  opacity: 0.4;
126}
127 
128.card-glow::before {
129  content: "";
130  position: absolute;
131  top: 50%;
132  left: 50%;
133  transform: translate(-50%, -50%) rotate(60deg);
134  width: 999px;
135  height: 999px;
136  background-image: conic-gradient(#000,
137      #402fb5 5%,
138      #000 38%,
139      #000 50%,
140      #cf30aa 60%,
141      #000 87%);
142  transition: transform 0.6s ease;
143}
144 
145/* Hover & focus effects */
146.neon-card-wrapper:hover .card-darkBorderBg::before,
147.neon-card-wrapper:focus-within .card-darkBorderBg::before {
148  transform: translate(-50%, -50%) rotate(-98deg);
149}
150 
151.neon-card-wrapper:hover .card-white::before,
152.neon-card-wrapper:focus-within .card-white::before {
153  transform: translate(-50%, -50%) rotate(-97deg);
154}
155 
156.neon-card-wrapper:hover .card-border::before,
157.neon-card-wrapper:focus-within .card-border::before {
158  transform: translate(-50%, -50%) rotate(-110deg);
159}
160 
161.neon-card-wrapper:hover .card-glow::before,
162.neon-card-wrapper:focus-within .card-glow::before {
163  transform: translate(-50%, -50%) rotate(-120deg);
164}
165 
166/* === Content Inside === */
167.card-content {
168  position: relative;
169  width: 100%;
170  height: 100%;
171  background: rgba(8, 6, 18, 0.92);
172  border-radius: 16px;
173  display: flex;
174  flex-direction: column;
175  overflow: hidden;
176  z-index: 2;
177  padding: 16px;
178  box-sizing: border-box;
179  color: white;
180}
181 
182.profile-top {
183  display: flex;
184  align-items: center;
185  gap: 12px;
186  margin-bottom: 12px;
187}
188 
189.profile-img {
190  width: 60px;
191  height: 60px;
192  border-radius: 50%;
193  object-fit: cover;
194  border: 2px solid #0ff;
195  box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
196}
197 
198.profile-info h3 {
199  margin: 0;
200  font-size: 18px;
201  font-weight: 700;
202  background: linear-gradient(90deg, #a099d8, #dfa2da);
203  -webkit-background-clip: text;
204  background-clip: text;
205  color: transparent;
206}
207 
208.profile-info p {
209  margin: 2px 0 0;
210  font-size: 13px;
211  color: #b0a0ff;
212  letter-spacing: 0.5px;
213}
214 
215/* Status badge */
216.status {
217  display: inline-block;
218  font-size: 10px;
219  padding: 2px 6px;
220  background: rgba(0, 255, 200, 0.2);
221  border: 1px solid #0ffc;
222  border-radius: 12px;
223  color: #0ffc;
224  margin-top: 4px;
225  letter-spacing: 1px;
226}
227 
228/* Mini Progress Bar */
229.stat-bar {
230  height: 6px;
231  background: rgba(255, 255, 255, 0.1);
232  border-radius: 3px;
233  margin: 12px 0;
234  overflow: hidden;
235}
236 
237.stat-fill {
238  height: 100%;
239  width: 78%;
240  background: linear-gradient(90deg, #402fb5, #cf30aa);
241  border-radius: 3px;
242}
243 
244.stat-label {
245  font-size: 12px;
246  color: #a099d8;
247  margin-bottom: 10px;
248  display: flex;
249  justify-content: space-between;
250}
251 
252/* Action icons */
253.card-actions {
254  display: flex;
255  justify-content: space-between;
256  margin-top: auto;
257}
258 
259.action-btn {
260  width: 36px;
261  height: 36px;
262  border-radius: 50%;
263  background: rgba(64, 47, 181, 0.2);
264  display: flex;
265  align-items: center;
266  justify-content: center;
267  cursor: pointer;
268  transition: all 0.3s ease;
269  border: 1px solid transparent;
270}
271 
272.action-btn:hover {
273  border-color: #cf30aa;
274  box-shadow: 0 0 10px rgba(207, 48, 170, 0.6);
275  transform: scale(1.1);
276}
277 
278.action-btn svg {
279  width: 18px;
280  height: 18px;
281  stroke: #cf30aa;
282  fill: none;
283  stroke-width: 1.5;
284}