Online hero section CSS generator. Design website hero banners with color pickers, sliders and buttons. Includes Minimal, Gradient, Bold and Warm presets.
Start building your next project today
.hero {
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
color: #ffffff;
padding: 80px 24px;
text-align: center;
}
.hero-title {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.hero-subtitle {
font-size: 19px;
opacity: 0.85;
line-height: 1.6;
margin: 0 0 32px;
margin-left: auto; margin-right: auto;
max-width: 600px;
}
.hero-btn {
display: inline-flex;
padding: 12px 32px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
background: rgba(255,255,255,0.2);
color: inherit;
border: none;
cursor: pointer;
text-decoration: none;
}
.hero-btn:hover {
background: rgba(255,255,255,0.3);
}