CSS Gradient Cards

Last Updated:

CSS gradient cards are an effective way to showcase your content on your website beautifuly. They can be customized to highlight new posts, featured content, and more.

Gradient card HTML CSS

CSS Gradient Card - Hover Slide Effect

Lorem ipsum dolor sit amet conse ctetur, adipisicing. Lorem ipsum dolor sit amet conse ctetur, adipisicing.

<a href="#" class="card-snippet">
    <div class="card-top">
        <svg xmlns="http://www.w3.org/2000/svg" class="" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
        </svg>
    </div>
    <div class="card-bottom">
        <div class="card-caption">
            <h4>
                CSS Gradient Card - Slide up hover effect
                <span class="arrow-right">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </span>
            </h4>
        </div>
        <div class="description">
            <p>
                Lorem ipsum dolor sit amet conse ctetur, adipisicing. Lorem
                ipsum dolor sit amet conse ctetur, adipisicing.
            </p>
        </div>
    </div>
</a>
.hover-slideup-effect {
    position: relative;
    overflow: hidden;
    display: block;
    height: 100%;
    background: #1f224b;
    background: linear-gradient(to right bottom, #1f224b 0%, #2d5d85 100%);
    border-radius: 24px;
    min-height: 350px;
    text-decoration: none;
    color: white;
}
.hover-slideup-effect .card-top svg {
    padding: 1rem 0 0 1rem;
    max-width: 80px;
    transition: 0.2s ease-in-out;
}
.hover-slideup-effect .card-top img {
    max-width: 80px;
    vertical-align: middle;
    transition: 0.2s ease-in-out;
}
.hover-slideup-effect .card-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    transform: translateY(100%);
    transition: 0.2s ease-in-out;
}
.hover-slideup-effect .card-bottom .card-caption {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1.4rem;
    padding-bottom: 1rem;
    transform: translateY(-100%);
    transition: 0.2s ease-in-out;
}
.hover-slideup-effect .card-bottom .card-caption h4 {
    font-size: 1.325rem;
}
.hover-slideup-effect .card-bottom .card-caption .arrow-right {
    width: 24px;
    height: 24px;
    display: inline;
    position: relative;
    margin-left: 0.5rem;
}
.hover-slideup-effect .card-bottom .card-caption .arrow-right svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 24px;
}
.hover-slideup-effect .card-bottom .description {
    margin: 0;
    padding: 0 1.4rem;
    color: #b9b9b9;
    font-size: 0.925rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin-bottom: 1rem;
}
.hover-slideup-effect .card-bottom .description p {
    color: #cbcbcb;
}
.hover-slideup-effect:hover .card-top svg {
    max-width: 60px;
}
.hover-slideup-effect:hover .card-top img {
    max-width: 60px;
}
.hover-slideup-effect:hover .card-bottom {
    transform: translateY(0);
}
.hover-slideup-effect:hover .card-caption {
    transform: translateY(0);
}
.hover-slideup-effect {
    position: relative;
    overflow: hidden;
    display: block;
    height: 100%;
    background: #1f224b;
    background: linear-gradient(to right bottom, #1f224b 0%, #2d5d85 100%);
    border-radius: 24px;
    min-height: 350px;
    text-decoration: none;
    color: white;
    .card-top {
        svg {
            padding: 1rem 0 0 1rem;
            max-width: 80px;
            transition: 0.2s ease-in-out;
        }
        img {
            max-width: 80px;
            vertical-align: middle;
            transition: 0.2s ease-in-out;
        }
    }
    .card-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        transform: translateY(100%);
        transition: 0.2s ease-in-out;
        .card-caption {
            position: relative;
            display: flex;
            align-items: center;
            padding: 1.4rem;
            padding-bottom: 1rem;
            transform: translateY(-100%);
            transition: 0.2s ease-in-out;
            h4 {
                font-size: 1.325rem;
            }
            .arrow-right {
                width: 24px;
                height: 24px;
                display: inline;
                position: relative;
                margin-left: 0.5rem;
                svg {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 24px;
                    height: 24px;
                }
            }
        }
        .description {
            margin: 0;
            padding: 0 1.4rem;
            color: #cbcbcb;
            font-size: 0.925rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -ms-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            margin-bottom: 1rem;
            p {
                color: #cbcbcb;
            }
        }
    }
    &:hover {
        .card-top {
            svg {
                max-width: 60px;
            }
            img {
                max-width: 60px;
            }
        }
        .card-bottom {
            transform: translateY(0);
        }
        .card-caption {
            transform: translateY(0);
        }
    }
}