Learn how to create a modern and stylish credit card layout using only HTML and CSS. Perfect for your website or portfolio projects to showcase payment interfaces beautifully.

HTML & CSS Code 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Credit Card UI</title>

  <style>

    body {

      background: #f0f0f0;

      display: flex;

      justify-content: center;

      align-items: center;

      height: 100vh;

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    }

    .credit-card {

      width: 350px;

      height: 200px;

      border-radius: 15px;

      background: linear-gradient(135deg, #667eea, #764ba2);

      color: #fff;

      padding: 20px;

      box-shadow: 0 10px 25px rgba(102, 126, 234, 0.5);

      position: relative;

    }

    .credit-card .chip {

      width: 60px;

      height: 45px;

      background: gold;

      border-radius: 8px;

      margin-bottom: 30px;

    }

    .credit-card .card-number {

      font-size: 22px;

      letter-spacing: 3px;

      margin-bottom: 25px;

    }

    .credit-card .card-holder {

      text-transform: uppercase;

      font-size: 14px;

      letter-spacing: 1.5px;

    }

    .credit-card .expiry {

      position: absolute;

      bottom: 20px;

      right: 20px;

      font-size: 14px;

      letter-spacing: 1.5px;

    }

  </style>

</head>

<body>

  <div class="credit-card">

    <div class="chip"></div>

    <div class="card-number">1234 5678 9012 3456</div>

    <div class="card-holder">JYOTHISH KRISHNA PR</div>

    <div class="expiry">12/25</div>

  </div>

</body>

</html>
Explanation of Code Functions:
    HTML Structure:
  • The main container div with class credit-card holds the entire card design.
  • Inside the card, there is a div for the chip, styled as a golden rectangle.
  • The card number is shown in a separate div with spaced digits.
  • The cardholder’s name and expiry date are displayed in their own sections.

    CSS Styles and Layout:
  • The card has a fixed width and height with rounded corners (border-radius).
  • A smooth linear gradient background gives a modern look.
  • Box-shadow adds a subtle 3D elevation effect.
  • The chip is styled with gold color and rounded edges.
  • Text elements have custom font sizes, letter spacing, and positioning for clarity.
  • The expiry date is positioned absolutely at the bottom right corner.