Article Categories

Selected Reading

How to create a \"card\" with CSS?

CSS Web Development Front End Technology

CSS cards are containers that hold information in an organized and visually appealing way. You'll commonly see cards used to display user profiles, product listings, or article previews. CSS provides several properties like box-shadow, border-radius, and padding to create professional-looking card components.

Syntax

.card {
    box-shadow: horizontal vertical blur spread color;
    border-radius: value;
    padding: value;
    background-color: color;
}

Basic Card Structure

A typical card consists of an image, header, and content text wrapped in a container element −

<div class="card">
   <img src="image.jpg" alt="Profile">
   <div class="card-content">
      <h3>Name</h3>
      <p>Description</p>
   </div>
</div>

Example: User Profile Card

The following example creates a professional user profile card with hover effects −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        padding: 20px;
    }
    
    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        max-width: 300px;
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        transition: box-shadow 0.3s ease;
    }
    
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
    }
    
    .card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .card-content {
        padding: 16px;
        text-align: center;
    }
    
    .card-content h3 {
        margin: 0 0 8px 0;
        color: #333;
    }
    
    .card-content p {
        margin: 0;
        color: #666;
        font-size: 14px;
    }
</style>
</head>
<body>
    <div class="card">
        <img src="/css/images/logo.png" alt="Profile">
        <div class="card-content">
            <h3>John Smith</h3>
            <p>Web Developer</p>
        </div>
    </div>
</body>
</html>

A white card with rounded corners appears on a light gray background. The card contains an image at the top and centered text below showing "John Smith" as the name and "Web Developer" as the title. When hovering over the card, the shadow becomes more prominent.

Example: Product Card with Button

Here's a more complex card design with additional styling and an action button −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        padding: 20px;
    }
    
    .product-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        overflow: hidden;
        max-width: 280px;
        transition: transform 0.3s ease;
    }
    
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    
    .product-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    
    .product-info {
        padding: 20px;
    }
    
    .product-info h3 {
        margin: 0 0 10px 0;
        color: #2c3e50;
        font-size: 18px;
    }
    
    .product-info p {
        color: #7f8c8d;
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .price {
        font-size: 20px;
        font-weight: bold;
        color: #e74c3c;
        margin-bottom: 15px;
    }
    
    .btn {
        background-color: #3498db;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
        font-size: 14px;
    }
    
    .btn:hover {
        background-color: #2980b9;
    }
</style>
</head>
<body>
    <div class="product-card">
        <img src="/css/images/logo.png" alt="Product">
        <div class="product-info">
            <h3>Wireless Headphones</h3>
            <p>High-quality sound with noise cancellation</p>
            <div class="price">$89.99</div>
            <button class="btn">Add to Cart</button>
        </div>
    </div>
</body>
</html>

A modern product card appears with rounded corners and a subtle shadow. It shows an image at the top, product title "Wireless Headphones", description, price "$89.99", and a blue "Add to Cart" button. When hovering, the card lifts up slightly with enhanced shadow.

Key Properties for Cards

Property	Purpose	Example Value
`box-shadow`	Creates depth and elevation	`0 4px 8px rgba(0,0,0,0.2)`
`border-radius`	Rounds the corners	`8px`
`padding`	Internal spacing	`16px`
`transition`	Smooth hover effects	`0.3s ease`

Conclusion

CSS cards are versatile components that combine images, text, and styling to create engaging user interfaces. Using properties like box-shadow, border-radius, and hover effects, you can create professional-looking cards for any web application.

AmitDiwan

Updated on: 2026-03-15T14:50:58+05:30

478 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next