Background Gradient With Centered Text

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6; /* A very light gray */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Gradient Card Styles === */
.bgc-card {
    --bgc-radius: 12px;
    --bgc-height: 250px;
    --bgc-padding: 2rem;
    --bgc-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    
    /* Default Gradient Colors */
    --bgc-gradient-start: #4f46e5;
    --bgc-gradient-end: #818cf8;

display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center; /* Horizontal centering */
    text-align: center;
    
    color: #ffffff;
    height: var(--bgc-height);
    padding: var(--bgc-padding);
    border-radius: var(--bgc-radius);
    background: linear-gradient(135deg, var(--bgc-gradient-start), var(--bgc-gradient-end));
    box-shadow: var(--bgc-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bgc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

.bgc-card .bgc-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.75rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.bgc-card .bgc-description {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

/* Gradient Color Variations */
.bgc-card.style-2 {
    --bgc-gradient-start: #db2777;
    --bgc-gradient-end: #fb923c;
}
.bgc-card.style-3 {
    --bgc-gradient-start: #16a34a;
    --bgc-gradient-end: #65a30d;
}
</style>

<div class="cards-grid-container">
    
    
    <div class="bgc-card">
        <h3 class="bgc-title">Join Our Community</h3>
        <p class="bgc-description">Connect with developers from around the world.</p>
    </div>
    
    
    <div class="bgc-card style-2">
        <h3 class="bgc-title">Unlock Premium Features</h3>
        <p class="bgc-description">Get access to exclusive content and tools.</p>
    </div>

<div class="bgc-card style-3">
        <h3 class="bgc-title">Start Your Project</h3>
        <p class="bgc-description">Begin building your next big idea today.</p>
    </div>
    
</div>