Scrolling Text Generator

Hero Section Generator

Create stunning hero sections with solid colors, gradients, or background images. Add headlines, CTAs, and choose from center, left, or split layouts.

Live Preview

Build Something Amazing

Create beautiful, responsive websites with our intuitive tools. No coding experience required.

Get Started FreeLearn More
Generated Code
<style>
.hero {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 60px 40px;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  text-align: center;
}
.hero h1 {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 16px;
  line-height: 1.15;
}
.hero p {
  font-size: 18px;
  color: #ffffff;
  opacity: 0.85;
  margin: 0 0 28px;
  line-height: 1.6;
}
.hero-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-btn {
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.hero-btn:hover { opacity: 0.85; }
.hero-btn-primary {
  background: #6366f1;
  color: #fff;
  border: none;
}
.hero-btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff40;
}
</style>

<section class="hero">
  <div class="hero-content">
    <h1>Build Something Amazing</h1>
    <p>Create beautiful, responsive websites with our intuitive tools. No coding experience required.</p>
    <div class="hero-btns">
      <a href="#" class="hero-btn hero-btn-primary">Get Started Free</a>
      <a href="#" class="hero-btn hero-btn-secondary">Learn More</a>
    </div>
  </div>
</section>

Content

Layout & Background