Create Modern Product Card UI using HTML and CSS

If you are looking for a modern product card UI design to showcase your smartwatch, gadgets or any eCommerce product, this Product Card UI built with HTML and CSS is a great choice. It features a sleek layout with an image area, price tag, detailed specifications and a stylish “Buy Now” button — all inside a responsive card.

This type of product card UI is perfect for online stores, landing pages, product showcases or portfolio websites where you want to display products in an attractive and user-friendly manner.

HTML Structure of Product Card

The HTML markup is simple and well-organized. It contains:

<div class="product-card">
    <div class="img"><img src="/public/assets/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 → Displays the smartwatch image inside a glowing background.
• Price Tag → Positioned at the top-right corner with a gradient background.
• Product Details → Includes the product name, short description, ratings and specifications like Compatible OS and Charger Type.
• Buy Now Button → A prominent call-to-action button at the bottom.

This clean structure makes it easy to replace text, images and specifications with your own product details.

Styling the Product Card with CSS

The CSS adds a modern gradient look, rounded corners and a glowing effect behind the product image. Key highlights:

@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(/public/assets/rating-4-5.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);
}

• Background Gradients → A dark gradient background for the card and a glowing circular background behind the product image.
• Price Tag Styling → Gradient background with white text, positioned at the top right.
• Grid Layout → Details section is structured using CSS Grid for better alignment of name, description, ratings and specs.
• Hover Effects → Smooth transitions and gradients enhance the user experience.
• Call-to-Action Button → The “Buy Now” button uses gradient styling, bold typography and rounded corners to make it stand out.

This design is not only attractive but also responsive, making it work seamlessly on different screen sizes.

Use Cases

This Product Card UI Design can be used for:

• eCommerce Websites → Showcase products like smartwatches, mobiles, accessories or gadgets.
• Landing Pages → Highlight special offers and new product launches.
• Portfolio Websites → Display design concepts for UI/UX projects.
• Web Templates → Can be integrated into product grid layouts or carousel sliders.

Final Thoughts

A well-designed product card UI can make a big difference in how users perceive your product. With this Smartwatch Product Card built using HTML and CSS, you get a stylish, functional and reusable component that can be easily adapted for any product showcase.

If you are building an eCommerce store, tech landing page or personal portfolio, this product card will help your website look modern, engaging and professional.