30 Unique CSS Cards Designs with Copyable Code like Codepen

Leave a Comment / By /

In-Depth Guide to 30 Unique CSS Card Designs

This article explores 30 different CSS card designs, each with unique styles, animations, and functionalities. Cards are versatile UI elements used in web design for displaying content like profiles, products, or information snippets. We’ll provide a live preview for each card, along with the HTML and CSS code you can copy and use in your projects. Each design builds on basic HTML structure but adds distinct flair through CSS.

Why use CSS cards? They enhance user experience with visual appeal, interactivity, and responsiveness. From simple shadows to complex animations, these examples cover a range of techniques. Feel free to modify them!

1. Basic Shadow Card

A simple card with a subtle box shadow for depth.

Card Title

Some content here.

You may like to read 50 Animated Background Ideas with CSS: In-Depth Tutorials and Copyable Code

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
}

2. Hover Scale Card

Scales up on hover for interactive feedback.

Card Title

Some content here.

You may like to read In-Depth Tutorial: Adding a Video Background to a Widget Section Using CSS

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
}
.card:hover {
    transform: scale(1.05);
}

3. Flip Card

Flips to reveal back side on hover.

Front

Hover me.

Back

Revealed!

<div class="card">
    <div class="card-inner">
        <div class="card-front">
            <h3>Front</h3>
            <p>Hover me.</p>
        </div>
        <div class="card-back">
            <h3>Back</h3>
            <p>Revealed!</p>
        </div>
    </div>
</div>

.card {
    perspective: 1000px;
    width: 200px;
    height: 300px;
}
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.card:hover .card-inner {
    transform: rotateY(180deg);
}
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
}
.card-back {
    transform: rotateY(180deg);
    background: #f8f9fa;
}

4. Gradient Background Card

Uses a linear gradient for colorful background.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: white;
    border-radius: 8px;
    text-align: center;
}

5. Neon Glow Card

Glows with neon effect on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: #000;
    color: #0ff;
    border-radius: 8px;
    text-align: center;
    transition: box-shadow 0.3s;
    box-shadow: 0 0 5px #0ff;
}
.card:hover {
    box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}

6. Glassmorphism Card

Transparent glass-like effect with blur.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    text-align: center;
}
/* Note: Place over a background image for best effect */

7. Parallax Card

Simple parallax effect on hover (requires JS for full, but CSS tilt here).

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s;
    perspective: 1000px;
}
.card:hover {
    transform: rotateX(10deg) rotateY(10deg);
}

8. Animated Border Card

Border animates on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, #ff0052, transparent 30%);
    animation: rotate 4s linear infinite;
}
.card:hover::before {
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    100% { transform: rotate(360deg); }
}

9. Reveal on Hover Card

Content reveals on hover.

Card Title

Revealed content here.

<div class="card">
    <h3>Card Title</h3>
    <div class="hidden-content">
        <p>Revealed content here.</p>
    </div>
</div>

.card {
    width: 200px;
    height: 100px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    transition: height 0.3s;
}
.card:hover {
    height: 200px;
}
.hidden-content {
    opacity: 0;
    transition: opacity 0.3s;
}
.card:hover .hidden-content {
    opacity: 1;
}

10. 3D Rotate Card

Rotates in 3D on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.card:hover {
    transform: rotateY(180deg);
}

11. Border Radius Variation Card

Unique rounded corners.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 50px 20px;
    text-align: center;
}

12. Color Change Hover Card

Changes background color on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 8px;
    text-align: center;
    transition: background 0.3s;
}
.card:hover {
    background: #d4edda;
}

13. Slide Up Card

Slides up on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-10px);
}

14. Pulsing Card

Pulses with animation.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

15. Shadow Spread Card

Shadow spreads on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    transition: box-shadow 0.3s;
}
.card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

16. Text Animation Card

Text animates on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
}
.card h3 {
    transition: color 0.3s;
}
.card:hover h3 {
    color: #ff0000;
}

17. Border Color Change Card

Border color changes on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.3s;
}
.card:hover {
    border-color: #007bff;
}

18. Fade In Card

Fades in on load.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    animation: fadeIn 1s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

19. Rotate Icon Card

Icon rotates on hover (assuming font-awesome or similar for icon).

🌐

Card Title

Some content here.

<div class="card">
    <i class="fa fa-icon"></i> /* Replace with actual icon */
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
}
.card i {
    transition: transform 0.3s;
}
.card:hover i {
    transform: rotate(360deg);
}

20. Expandable Card

Expands width on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    transition: width 0.3s;
}
.card:hover {
    width: 250px;
}

21. Dark Mode Card

Dark themed card.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: #333;
    color: white;
    border-radius: 8px;
    text-align: center;
}

22. Striped Background Card

Striped pattern background.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 10px, #e9e9e9 10px, #e9e9e9 20px);
    border-radius: 8px;
    text-align: center;
}

23. Bounce Animation Card

Bounces on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
}
.card:hover {
    animation: bounce 0.5s;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

24. Tilt Card

Tilts on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
}
.card:hover {
    transform: rotate(5deg);
}

25. Multi Shadow Card

Multiple colored shadows.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 0 10px red, 0 0 20px blue;
    border-radius: 8px;
    text-align: center;
}

26. Clip Path Card

Custom shape using clip-path.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    text-align: center;
}

27. Wave Border Card

Wavy bottom border.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px 20px 40px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px 8px 0 0;
    position: relative;
    text-align: center;
}
.card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
    background-size: 20px 20px;
    background-position: 0 0;
}

28. Glow Text Card

Text glows on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: #000;
    color: white;
    border-radius: 8px;
    text-align: center;
}
.card h3 {
    transition: text-shadow 0.3s;
}
.card:hover h3 {
    text-shadow: 0 0 10px #fff;
}

29. Image Overlay Card

Overlay on image background.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: url('image-url.jpg') center/cover;
    color: white;
    border-radius: 8px;
    text-align: center;
    position: relative;
}
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    border-radius: 8px;
}
.card > * {
    position: relative;
    z-index: 1;
}

30. Shake Animation Card

Shakes on hover.

Card Title

Some content here.

<div class="card">
    <h3>Card Title</h3>
    <p>Some content here.</p>
</div>

.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
}
.card:hover {
    animation: shake 0.5s;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

Conclusion: These 30 card designs showcase the power of CSS for creating engaging UI elements. Experiment with them to fit your needs!

Leave a Comment

Your email address will not be published. Required fields are marked *