Create Responsive Product Card using HTML and CSS

Product cards are the cornerstone of e-commerce platforms and modern user interfaces. They encapsulate crucial product details in a visually appealing manner, enticing potential buyers to explore or purchase. In this in-depth tutorial, we will guide you through the process of designing a sleek and responsive product card using HTML and CSS. 

With a focus on aesthetics, functionality and user experience, this design is optimized to elevate your e-commerce or portfolio website. A well-crafted product card enhances user engagement by displaying product features concisely and attractively.

Also Read: Explore the Lesser-Known HTML Tags You Should Know About 

It provides users with a snapshot of essential details like pricing, specifications and user ratings, along with a compelling call-to-action button. By mastering product card design, you can significantly improve the visual appeal and effectiveness of your online store or design portfolio.

HTML Structure

The card features a sleek gradient background for both the card body and price tag, making it visually appealing and modern. The product image is showcased prominently, with a blurred circular glow effect underneath to add depth and highlight the product.

<div class="product-card">
  <div class="img"><img src="https://i.ibb.co/Swv2596/watch.png" alt=""></div>
  <p class="price">Rs 1,199</p>
  <div class="details">
    <h3 class="name">Delon Revolt</h3>
    <p class="description">1.83 Display | BT Calling | Fastcharge | 110+ Sports Mode | 200+ WatchFaces Smartwatch
    </p>
    <div class="ratings star-4-5"></div>
    <div class="separator"></div>
    <div class="specs" id="spec1">
      <h3>Compatible OS</h3><span>Android &iOS</span>
    </div>
    <div class="specs" id="spec2">
      <h3>Charger Type</h3><span>Pogo Pin Charging Cable</span>
    </div>
    <div class="specs" id="spec3">
      <h3>Charger Type</h3><span>Pogo Pin Charging Cable</span>
    </div>
    <button class="buy-btn">Buy Now</button>
  </div>
</div>

• Image Section: The top half of the card is reserved for the product image, ensuring it grabs attention. A glowing circular effect under the image adds depth and style, enhancing the visual hierarchy.
• Price Tag: A price label at the top-right corner features a bold gradient background, making the product cost easily noticeable.
• Details Section: The lower half of the card uses a grid layout to neatly display i.e. Product name and description, Technical specifications such as compatibility and charger type and User ratings with a star-based visual system.
• Call-to-Action Button: The "Buy Now" button spans the bottom width, providing a clear and prominent invitation for users to make a purchase.

CSS Styling Highlights

The CSS design of this product card focuses on creating a visually appealing and user-friendly layout. A modern and sleek aesthetic is achieved using gradients, subtle shadows and responsive elements. Key highlights include:

@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap");
 
body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  background: #000000;
  justify-content: center;
}

.product-card {
  width: 350px;
  height: 500px;
  min-width: 320px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  font-family: "Baloo Bhai 2";
  background: linear-gradient(rgb(33, 33, 33), rgb(17, 17, 17) 50%);
}

.img {
  width: 100%;
  height: 50%;
  z-index: 1;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.img::before {
  content: '';
  width: 50%;
  height: 50%;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  filter: blur(35px);
  background: rgb(142, 227, 251);
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.price {
  position: absolute;
  right: 0px;
  top: 0;
  background: linear-gradient(rgb(75 165 200), #18355e);
  padding: 2px 15px;
  font-size: 15px;
  color: white;
  font-weight: bold;
  letter-spacing: .8px;
  border-radius: 0 0 0px 10px;
}

.details {
  width: 100%;
  height: 50%;
  padding: 15px;
  color: white;
  gap: 15px;
  display: grid;
  align-content: center;
  align-items: center;
  border-radius: 10px;
  justify-content: flex-start;
  grid-template-columns: 50% auto 1fr;
  background: linear-gradient(rgb(49, 49, 49), rgb(7, 7, 7));
  grid-template-areas: "name separator spec1" "desc separator spec2" "rating separator spec3" "btn btn btn";
}

.description {
  grid-area: desc;
  font-size: 11px;
  line-height: 1.3;
  color: rgb(159, 159, 159);
}

.ratings {
  grid-area: rating;
}

.star-4-5 {
  height: 15px;
  align-self: flex-start;
  background: url(https://i.ibb.co/tCG1Nxx/stars.png) left /contain no-repeat;
}

.separator {
  height: 100%;
  width: 1px;
  grid-area: separator;
  background: rgb(75, 173, 211);
}

.specs {
  font-size: 10px;
  line-height: 1.2;
  color: #a3a3a3;
}

.specs h3 {
  letter-spacing: .8px;
  margin-bottom: 5px;
  color: rgb(122, 207, 240);
}

.buy-btn {
  grid-area: btn;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: bold;
  line-height: 2.5;
  cursor: pointer;
  border-radius: 10px;
  letter-spacing: .5px;
  font-family: "Baloo Bhai 2";
  background: linear-gradient(rgb(75 165 200), #18355e);
}

• Card Design: Rounded corners and gradient backgrounds create a modern aesthetic. Ensures responsiveness for different screen sizes with flexible widths.
• Image Section: Product image is centered with a circular glowing background for depth. Blur effect enhances the visual hierarchy.
• Price Tag: Positioned absolutely in the top-right with a gradient for emphasis. Bold text ensures easy readability.
• Details Section: Grid layout divides content into clear areas (name, description, specs, ratings, button). Separators and muted text colors improve clarity and design flow.
• Call-to-Action Button:  Gradient background, rounded corners and bold text make it stand out. Ensures high visibility and interaction.

Enhancing User Engagement

This product card design doesn't just look great—it’s crafted to drive user engagement. The combination of a visually stunning layout and concise product information makes it easier for users to quickly evaluate products and take action.

• Visual Appeal: The use of gradients, glowing effects and clean typography ensures that the card catches the user’s eye.
• User-Friendly Layout: The grid-based structure organizes content logically, making it easy to navigate and comprehend.
• Call-to-Action Emphasis: The bold and inviting "Buy Now" button encourages users to proceed with their purchase, reducing decision fatigue.

Also Read: Build Realistic Candle using HTML and CSS

Why This Design Works

The balance between aesthetics and functionality is the hallmark of this product card design. By focusing on essential elements like the product image, price and key specifications, it provides users with all the information they need in a single glance. The gradient backgrounds and glowing effects add a layer of sophistication, making it perfect for modern e-commerce platforms.

Whether you're creating an online store, showcasing your UI/UX design skills or building a portfolio, this product card design is a versatile addition to your toolkit.

By implementing this sleek product card design, you can enhance the user experience on your e-commerce website or design portfolio. Its blend of modern aesthetics, responsive elements and functional layout makes it an excellent example of how HTML and CSS can work together to create visually stunning UI components.

Stay tuned for more tutorials and design inspirations to take your web development skills to the next level.

Download