Create visual depth and vibrant headers using CSS background colors, images, and smooth gradients.
1. Background Properties & Linear Gradients
⊞Code Example
.hero-card {
/* Linear Gradient (Angle, Color Stops) */
background: linear-gradient(135deg, #09101f 0%, #15203b 100%);
border: 1px solid #1e293b;
border-radius: 16px;
padding: 2rem;
}
.background-image-cover {
background-image: url('/assets/wallpaper.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}