Card by Gianluks90

Made by

@Gianluks90

Theme:

Light

#card#creditcard

#e8e8e8

191 views

CSSAdd prefixes

1.card {
2  width: 245px;
3  height: 155px;
4  background: lightgrey;
5  position: relative;
6  border-radius: 15px;
7}
8
9.foreground {
10  border-radius: 15px;
11  position: absolute;
12  width: 100%;
13  height: 100%;
14  background: rgba(255, 255, 255, 0.18);
15  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
16  backdrop-filter: blur(2.8px);
17  -webkit-backdrop-filter: blur(2.8px);
18  padding: 16px;
19  color: white;
20}
21
22.credit-card-header {
23  display: flex;
24  justify-content: space-between;
25}
26
27.credit-card-chip-container {
28  margin: 8px 0;
29  height: 40px;
30  width: 40px;
31}
32
33.chip {
34  width: 100%;
35  height: 100%;
36}
37
38.category, .bank {
39  font-size: smaller;
40}
41
42.info-container {
43  width: 100%;
44  display: flex;
45  flex-direction: column;
46  gap: 4px;
47}
48
49.names {
50  align-self: flex-end;
51  text-transform: uppercase;
52  font-size: smaller;
53}
54
55.serial {
56  align-self: flex-end;
57  letter-spacing: 2px;
58  font-size: 15px;
59  font-family: monospace;
60}
61
62.expire {
63  margin-left: 3px;
64  font-size: smaller;
65}
66

.card {
  width: 245px;
  height: 155px;
  background: lightgrey;
  position: relative;
  border-radius: 15px;
}

.foreground {
  border-radius: 15px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.8px);
  -webkit-backdrop-filter: blur(2.8px);
  padding: 16px;
  color: white;
}

.credit-card-header {
  display: flex;
  justify-content: space-between;
}

.credit-card-chip-container {
  margin: 8px 0;
  height: 40px;
  width: 40px;
}

.chip {
  width: 100%;
  height: 100%;
}

.category, .bank {
  font-size: smaller;
}

.info-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.names {
  align-self: flex-end;
  text-transform: uppercase;
  font-size: smaller;
}

.serial {
  align-self: flex-end;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: monospace;
}

.expire {
  margin-left: 3px;
  font-size: smaller;
}

HTML

1<div class="card">
2  <div class="foreground">
3    <div class="credit-card-header">
4      <div class="category"> <strong>Credit</strong> card</div>
5      <div class="bank">bank-name</div>
6    </div>
7    <div class="credit-card-chip-container">
8      <svg class="chip" fill="#d4af37" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511 511" xml:space="preserve">
9        <path d="M455.5,56h-400C24.897,56,0,80.897,0,111.5v288C0,430.103,24.897,455,55.5,455h400c30.603,0,55.5-24.897,55.5-55.5v-288
10	C511,80.897,486.103,56,455.5,56z M464,248H343v-56.5c0-4.687,3.813-8.5,8.5-8.5H464V248z M343,263h121v65H343V263z M479,223h17v65
11	h-17V223z M479,208v-65h17v65H479z M464,168H351.5c-12.958,0-23.5,10.542-23.5,23.5V408H183V103h272.5c4.687,0,8.5,3.813,8.5,8.5
12	V168z M168,248H47v-65h121V248z M32,288H15v-65h17V288z M47,263h121v65H47V263z M263,88V71h137v17H263z M248,88H111V71h137V88z
13	 M168,103v65H47v-56.5c0-4.687,3.813-8.5,8.5-8.5H168z M32,208H15v-65h17V208z M15,303h17v65H15V303z M47,343h121v65H55.5
14	c-4.687,0-8.5-3.813-8.5-8.5V343z M248,423v17H111v-17H248z M263,423h137v17H263V423z M343,408v-65h121v56.5
15	c0,4.687-3.813,8.5-8.5,8.5H343z M479,303h17v65h-17V303z M496,111.5V128h-17v-16.5c0-12.958-10.542-23.5-23.5-23.5H415V71h40.5
16	C477.832,71,496,89.168,496,111.5z M55.5,71H96v17H55.5C42.542,88,32,98.542,32,111.5V128H15v-16.5C15,89.168,33.168,71,55.5,71z
17	 M15,399.5V383h17v16.5c0,12.958,10.542,23.5,23.5,23.5H96v17H55.5C33.168,440,15,421.832,15,399.5z M455.5,440H415v-17h40.5
18	c12.958,0,23.5-10.542,23.5-23.5V383h17v16.5C496,421.832,477.832,440,455.5,440z"></path>
19      </svg>
20    </div>
21    <div class="info-container">
22      <p class="names">Owner name</p>
23      <p class="serial">1264 3245 3322 1356</p>
24      <p class="expire">03/24</p>
25    </div>
26  </div>
27  <svg class="background" width="100%" height="100%" viewBox="0 0 1600 800">
28    <rect fill="#ff9d00" width="1600" height="800"></rect>
29    <g stroke="#000" stroke-width="66.7" stroke-opacity="0.05" transform="rotate(-30 500 100)">
30      <circle fill="#ff9d00" cx="0" cy="0" r="1800"></circle>
31      <circle fill="#fb8d17" cx="0" cy="0" r="1700"></circle>
32      <circle fill="#f47d24" cx="0" cy="0" r="1600"></circle>
33      <circle fill="#ed6e2d" cx="0" cy="0" r="1500"></circle>
34      <circle fill="#e35f34" cx="0" cy="0" r="1400"></circle>
35      <circle fill="#d85239" cx="0" cy="0" r="1300"></circle>
36      <circle fill="#cc453e" cx="0" cy="0" r="1200"></circle>
37      <circle fill="#be3941" cx="0" cy="0" r="1100"></circle>
38      <circle fill="#b02f43" cx="0" cy="0" r="1000"></circle>
39      <circle fill="#a02644" cx="0" cy="0" r="900"></circle>
40      <circle fill="#901e44" cx="0" cy="0" r="800"></circle>
41      <circle fill="#801843" cx="0" cy="0" r="700"></circle>
42      <circle fill="#6f1341" cx="0" cy="0" r="600"></circle>
43      <circle fill="#5e0f3d" cx="0" cy="0" r="500"></circle>
44      <circle fill="#4e0c38" cx="0" cy="0" r="400"></circle>
45      <circle fill="#3e0933" cx="0" cy="0" r="300"></circle>
46      <circle fill="#2e062c" cx="0" cy="0" r="200"></circle>
47      <circle fill="#210024" cx="0" cy="0" r="100"></circle>
48    </g>
49  </svg>
50
51</div>

<div class="card">
  <div class="foreground">
    <div class="credit-card-header">
      <div class="category"> <strong>Credit</strong> card</div>
      <div class="bank">bank-name</div>
    </div>
    <div class="credit-card-chip-container">
      <svg class="chip" fill="#d4af37" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511 511" xml:space="preserve">
        <path d="M455.5,56h-400C24.897,56,0,80.897,0,111.5v288C0,430.103,24.897,455,55.5,455h400c30.603,0,55.5-24.897,55.5-55.5v-288
	C511,80.897,486.103,56,455.5,56z M464,248H343v-56.5c0-4.687,3.813-8.5,8.5-8.5H464V248z M343,263h121v65H343V263z M479,223h17v65
	h-17V223z M479,208v-65h17v65H479z M464,168H351.5c-12.958,0-23.5,10.542-23.5,23.5V408H183V103h272.5c4.687,0,8.5,3.813,8.5,8.5
	V168z M168,248H47v-65h121V248z M32,288H15v-65h17V288z M47,263h121v65H47V263z M263,88V71h137v17H263z M248,88H111V71h137V88z
	 M168,103v65H47v-56.5c0-4.687,3.813-8.5,8.5-8.5H168z M32,208H15v-65h17V208z M15,303h17v65H15V303z M47,343h121v65H55.5
	c-4.687,0-8.5-3.813-8.5-8.5V343z M248,423v17H111v-17H248z M263,423h137v17H263V423z M343,408v-65h121v56.5
	c0,4.687-3.813,8.5-8.5,8.5H343z M479,303h17v65h-17V303z M496,111.5V128h-17v-16.5c0-12.958-10.542-23.5-23.5-23.5H415V71h40.5
	C477.832,71,496,89.168,496,111.5z M55.5,71H96v17H55.5C42.542,88,32,98.542,32,111.5V128H15v-16.5C15,89.168,33.168,71,55.5,71z
	 M15,399.5V383h17v16.5c0,12.958,10.542,23.5,23.5,23.5H96v17H55.5C33.168,440,15,421.832,15,399.5z M455.5,440H415v-17h40.5
	c12.958,0,23.5-10.542,23.5-23.5V383h17v16.5C496,421.832,477.832,440,455.5,440z"></path>
      </svg>
    </div>
    <div class="info-container">
      <p class="names">Owner name</p>
      <p class="serial">1264 3245 3322 1356</p>
      <p class="expire">03/24</p>
    </div>
  </div>
  <svg class="background" width="100%" height="100%" viewBox="0 0 1600 800">
    <rect fill="#ff9d00" width="1600" height="800"></rect>
    <g stroke="#000" stroke-width="66.7" stroke-opacity="0.05" transform="rotate(-30 500 100)">
      <circle fill="#ff9d00" cx="0" cy="0" r="1800"></circle>
      <circle fill="#fb8d17" cx="0" cy="0" r="1700"></circle>
      <circle fill="#f47d24" cx="0" cy="0" r="1600"></circle>
      <circle fill="#ed6e2d" cx="0" cy="0" r="1500"></circle>
      <circle fill="#e35f34" cx="0" cy="0" r="1400"></circle>
      <circle fill="#d85239" cx="0" cy="0" r="1300"></circle>
      <circle fill="#cc453e" cx="0" cy="0" r="1200"></circle>
      <circle fill="#be3941" cx="0" cy="0" r="1100"></circle>
      <circle fill="#b02f43" cx="0" cy="0" r="1000"></circle>
      <circle fill="#a02644" cx="0" cy="0" r="900"></circle>
      <circle fill="#901e44" cx="0" cy="0" r="800"></circle>
      <circle fill="#801843" cx="0" cy="0" r="700"></circle>
      <circle fill="#6f1341" cx="0" cy="0" r="600"></circle>
      <circle fill="#5e0f3d" cx="0" cy="0" r="500"></circle>
      <circle fill="#4e0c38" cx="0" cy="0" r="400"></circle>
      <circle fill="#3e0933" cx="0" cy="0" r="300"></circle>
      <circle fill="#2e062c" cx="0" cy="0" r="200"></circle>
      <circle fill="#210024" cx="0" cy="0" r="100"></circle>
    </g>
  </svg>

</div>