Designing an eye-catching credit card interface with HTML and CSS can significantly enhance the user experience on your website, particularly for businesses involved in e-commerce or financial transactions. In this guide, I will walk you through the steps to create an elegant and modern credit card design from scratch.
Step1: Credit Card Design with HTML
This code snippet creates a stylized credit card layout using HTML, incorporating external resources like Google Fonts for typography, SVG for the bank logo, and images for chip and MasterCard logo elements.
<link href='https://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Signika:400' rel='stylesheet' type='text/css'>
<div class="card-holder">
<div class="card">
<span class="title">Bank of Ireland</span>
<span class="bank-logo">
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="73.7px" height="40.4px" viewBox="0 0 73.7 40.4" style="enable-background:new 0 0 73.7 40.4;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<defs>
</defs>
<g>
<path class="st0" d="M37.6,40.4c-8.9-0.1-16.8-1.3-24.3-4.7c-3.6-1.6-7-3.7-9.6-6.7c-5.2-5.9-4.9-12.9,0.6-18.4
c3.9-3.9,8.7-6.2,13.9-7.9c7.3-2.3,14.8-3.1,22.4-2.6c6.8,0.4,13.4,1.7,19.6,4.5c3.7,1.7,7.2,3.8,9.9,6.9c4.9,5.8,4.7,12.6-0.7,18
c-3.4,3.4-7.5,5.7-11.9,7.3c-5.1,1.9-10.3,2.9-15.7,3.3C40.2,40.3,38.5,40.3,37.6,40.4z M37.4,39.1c0.8,0,2.1-0.1,3.4-0.2
c5.6-0.3,11.1-1.5,16.2-3.8c4.3-1.9,8.1-4.4,10.7-8.4c1.7-2.6,2.4-5.4,1.8-8.4c-0.6-3.1-2.3-5.6-4.5-7.8C61.4,7,56.9,5,52.2,3.5
c-6-1.8-12.1-2.4-18.4-2.1C29.1,1.7,24.4,2.5,20,4c-4.6,1.6-8.8,3.8-12.2,7.4c-4.8,5.2-5,11.4-0.5,16.8c2.3,2.8,5.2,4.7,8.4,6.2
C22.3,37.8,29.5,39,37.4,39.1z"/>
<path class="st0" d="M37.3,37.6c-7.4-0.1-14.2-1.1-20.6-4.1c-3.1-1.4-6-3.3-8.2-5.9c-4.2-4.9-4-10.8,0.5-15.4
c3.3-3.4,7.4-5.4,11.8-6.9C27.5,3.1,34.5,2.5,41.5,3C47.3,3.5,52.8,4.8,58,7.4c2.6,1.3,5.1,3,7,5.2c4.3,4.9,4.2,10.7-0.2,15.4
c-3.1,3.3-7,5.3-11.2,6.8c-4.4,1.5-8.9,2.4-13.5,2.6C39,37.5,38,37.5,37.3,37.6z M36.9,36.4c6.1,0,12-0.9,17.6-3.1
c3.8-1.5,7.2-3.5,9.8-6.7c3.1-3.9,3.2-8.5,0.2-12.5c-1.6-2.1-3.7-3.7-6-5c-5.8-3.3-12.1-4.6-18.7-5c-7-0.4-13.9,0.4-20.6,3
c-3.8,1.5-7.3,3.5-9.8,6.7c-3.2,4-3.2,8.7,0,12.7c2.1,2.6,4.7,4.4,7.7,5.7C23.4,35.2,30,36.3,36.9,36.4z"/>
<path class="st0" d="M21.1,23.4c0.6,1.4,1.8,1.9,3,2.3c2.5,0.8,5.1,1.5,7.7,2.2c1,0.3,2,0.6,3,1c0.8,0.4,1.5,0.9,2.2,1.4
c1.3-1.6,3.5-2,5.6-2.6c2.4-0.7,4.8-1.3,7.2-2.1c1.2-0.4,2.4-0.9,2.8-2.5c0,1.7,0.2,3.2-0.1,4.6c-0.1,0.7-1,1.4-1.8,1.7
c-1.5,0.7-3.1,1.1-4.7,1.6c-2.1,0.6-4.2,1.2-6.3,1.8c-1.2,0.4-2.3,1.1-2.8,2.6c-0.5-1.6-1.8-2.2-3.1-2.6c-2.4-0.8-4.9-1.4-7.4-2.1
c-1.2-0.4-2.5-0.8-3.7-1.4c-1.2-0.5-1.8-1.4-1.7-2.8C21.1,25.4,21.1,24.4,21.1,23.4z"/>
<path class="st0" d="M36.9,15.3c1.1-1.5,2.8-1.9,4.4-2.4c2.5-0.7,4.9-1.4,7.4-2.1c0.8-0.2,1.5-0.5,2.2-0.9c0.7-0.4,1.2-1,1.8-1.6
c0,0.3,0,0.8,0,1.3c0,0.4,0,0.7,0,1.1c0.3,2-0.8,3.1-2.4,3.6c-2.3,0.8-4.7,1.4-7,2c-1.3,0.4-2.7,0.8-4,1.3c-1.1,0.4-2,1-2.4,2.4
c-0.6-1.6-1.8-2.3-3.2-2.7c-2.4-0.7-4.9-1.3-7.3-2c-1.3-0.4-2.6-0.9-3.8-1.5c-1.1-0.5-1.6-1.4-1.5-2.6c0.1-1,0-2.1,0.1-3.2
c0.7,1.8,2.3,2.2,3.8,2.7c2.8,0.9,5.7,1.6,8.5,2.5C35.4,13.8,36,14.2,36.9,15.3z"/>
<path class="st0" d="M36.9,27.6c-0.4-1.3-1.2-2-2.2-2.4c-2.5-0.8-5-1.5-7.5-2.2c-1.4-0.4-2.8-0.9-4.2-1.4c-1.3-0.5-2-1.5-1.9-3
c0.1-1,0-2,0.1-3c0.5,1.4,1.7,2,2.9,2.3c2.6,0.8,5.2,1.5,7.8,2.3c1,0.3,2.1,0.6,3.1,1.1c0.7,0.3,1.4,0.9,2.1,1.4
c1.3-1.6,3.5-2,5.5-2.6c2.5-0.8,5-1.4,7.5-2.2c1.1-0.4,2.1-0.9,2.6-2.2c0,1.4,0.1,2.7,0,4c-0.1,0.9-0.8,1.5-1.6,1.8
c-1.9,0.7-3.8,1.3-5.7,1.9c-2,0.6-3.9,1.1-5.9,1.8C38.3,25.5,37.3,26.2,36.9,27.6z"/>
</g>
</svg>
</span>
<img class="chip" src="http://jamesdelaney.ie/dev/chip.png">
<img class="mc" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/MasterCard_logo.png/320px-MasterCard_logo.png">
<span class="holo-back"></span>
<span class="holo"></span>
<br>
<span class="emboss number">5467 5670 7623 0945</span><br><br>
<span class="small-type">Valid From UNTIL END</span><br><br>
<span class="emboss exp">07/2024 – 10/2034</span><br><br>
<span class="emboss name">Mrs David Warner</span>
</div>
</div>Step2: Styling the Credit Card Design
This code defines styles with CSS to customize the look and feel of the credit card design. It includes elements like background colors, fonts, emboss effects, shadows, and positioning of the card logo, chip, card number, expiry date, and cardholder name.
body {
background: linear-gradient(125deg, #207A89, #17A3BA 55%);
}
.card {
font-family: Share Tech Mono;
background-color: #9BA7B2;
display: block;
padding 50px 100px;
width: 700px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
border: 1px solid grey;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 430px;
background: linear-gradient(-125deg, #1D3349, #06121E 55%);
}
.bank-logo svg {
position: absolute;
padding-left: 220px;
padding-top: 15px;
max-width: 65px;
opacity: 0.9;
}
img.chip {
max-width: 80px;
position: absolute;
padding-top: 120px;
padding-left: 50px
}
.mc {
position: absolute;
max-width: 140px;
padding-top: 300px;
padding-left: 520px;
}
.title {
font-family: Signika;
color: white;
font-size: 28px;
font-weight: 400;
opacity: 0.8;
padding-left: 20px;
padding-top: 20px;
position: absolute;
display: inline-block;
}
.emboss {
font-family: Share Tech Mono;
color: transparent;
text-shadow: -2px -2px 2px rgba(255,255,255,1),
1px 1px 1px rgba(0,0,0,0.9),
2px -2px 4px rgba(255,255,255,1),
-2px -2px 2px rgba(0,0,0,0.9),
-2px 2px 1px rgba(0,0,0,0.9);
-webkit-text-stroke:2px rgba(0,0,0,0.4);
}
.number {
display: inline-block;
padding-top: 200px;
font-size: 52px;
padding-left: 50px;
position: relative;
z-index: 999;
}
.name {
font-size: 32px;
padding-left: 30px;
text-shadow: -2px -1px 1px rgba(255,255,255,1),
1px 1px 1px rgba(0,0,0,1),
1px 0px 1px rgba(255,255,255,1),
-1px -1px 1px rgba(0,0,0,1),
-1px 1px 1px rgba(0,0,0,1);
-webkit-text-stroke: 1px rgba(0,0,0,0.2);
display: inline-block;
padding-bottom: 20px;
}
.small-type {
font-family: sans-serif;
text-transform: uppercase;
color: white;
padding-left: 100px;
line-height: 10px;
letter-spacing: 1px;
opacity: 0.7;
}
.exp {
font-size: 32px;
padding-left: 100px;
text-shadow: -2px -1px 1px rgba(255,255,255,1),
1px 1px 1px rgba(0,0,0,1),
1px 0px 1px rgba(255,255,255,1),
-1px -1px 1px rgba(0,0,0,1),
-1px 1px 1px rgba(0,0,0,1);
-webkit-text-stroke: 1px rgba(0,0,0,0.2);
-webkit-text-stroke: 1px rgba(0,0,0,0.2);
}
.holo {
background: linear-gradient(270deg, #ec1414, #eccb14, #14ec1c, #14eaec, #1914ec, #ec14da);
background-size: 1200% 1200%;
-webkit-animation: Logo 4s ease infinite;
-moz-animation: Logo 4s ease infinite;
-o-animation: Logo 4s ease infinite;
animation: Logo 4s ease infinite;
display: block;
width: 130px;
height: 90px;
z-index: 19;
border-radius: 55px;
position: absolute;
top: 140px;
left: 530px;
}
@-webkit-keyframes Logo {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes Logo {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes Logo {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes Logo {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.holo-back {
position: absolute;
top: 140px;
left: 530px;
/* top: 300px; */
height: 90px;
width: 130px;
z-index: 22;
background-repeat: no-repeat;
background-image: url('http://jamesdelaney.ie/dev/hologram.png');
background-position: 50% 50%;
background-size: cover;
opacity: 0.5;
}Designing Credit Card: A Guide with HTML and CSS Demo
And there you have it! A simple yet stylish credit card design created using HTML and CSS. This tutorial shows how with just a few lines of code, you can create something that looks professional and polished. Feel free to customize the colors, fonts, and sizes to fit the style of your website.
