Gradient ile Hero Section Tasarımı

Hero section, web sayfalarının ilk izlenimini oluşturan kritik alandır. CSS gradient kullanarak çarpıcı, modern ve marka kimliğine uyumlu hero bölümleri tasarlayabilirsiniz. Bu rehberde gradient hero teknikleri, overlay yöntemleri, animasyonlu gradientler, metin okunabilirliği ve responsive tasarım konularını ele alıyoruz.

Temel Gradient Hero

En basit hero section, linear gradient arka plan ve ortada veya sol hizalı metin içerir. Gradient yönü ve renk seçimi, duygusal tonu belirler.

.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  color: white;
  padding: 2rem;
}

CSS gradient nedir rehberimizde linear-gradient sözdizimini detaylı inceleyebilirsiniz. 135deg açısı çapraz geçiş sağlar ve modern bir his verir.

Görsel Üzerinde Overlay

Fotoğraf veya ilustrasyon üzerinde gradient overlay kullanarak hem görsel derinlik hem de metin okunabilirliği sağlarsınız. Gradient, görselin üzerine katman olarak eklenir.

.hero-with-image {
  position: relative;
  min-height: 80vh;
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url('/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}

CSS gradient overlay rehberimizde pseudo-element, mix-blend-mode ve diğer overlay tekniklerini bulabilirsiniz.

Animasyonlu Gradient

Arka planda hafif hareket eden gradient, dikkat çekici ve dinamik bir etki oluşturur. @keyframes ile background-position veya gradient açısını değiştirebilirsiniz.

.hero-animated {
  background: linear-gradient(
    -45deg,
    #6366f1,
    #8b5cf6,
    #ec4899,
    #6366f1
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Gradient animation CSS rehberimizde daha fazla animasyon tekniği bulabilirsiniz. Dikkat: aşırı animasyon bazı kullanıcılarda rahatsızlık yaratabilir; prefers-reduced-motion ile devre dışı bırakılabilir.

Metin Okunabilirliği

Gradient üzerinde metin kullanırken kontrast kritiktir. Geçiş bölgelerinde okunabilirlik düşebilir; bu nedenle metni koyu veya net bir bölgeye yerleştirmek, text-shadow eklemek veya yarı saydam bir arka plan kutusu kullanmak önerilir.

.hero h1 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero .subtitle {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  display: inline-block;
}

WCAG AA standardı normal metin için en az 4.5:1 kontrast önerir. Açık renkli metin için gradient'in ilgili bölgesi yeterince koyu olmalıdır.

Responsive Hero Tasarımı

Mobilde hero yüksekliği ve padding değerleri farklı olmalıdır. Küçük ekranlarda min-height'ı azaltarak içeriğin görünür kalmasını sağlayın.

.hero {
  min-height: 70vh;
  padding: 3rem 2rem;
}

@media (max-width: 768px) {
  .hero {
    min-height: 50vh;
    padding: 2rem 1rem;
    text-align: center;
  }
}

Görsel kullanıyorsanız mobilde farklı crop veya daha küçük görsel tercih edebilirsiniz; background-image ile url('/hero-mobile.jpg') medya sorgusu içinde değiştirilebilir.

Gradient ile CTA Butonları

Hero içindeki CTA (Call-to-Action) butonları da gradient ile vurgulanabilir. Ana gradient ile uyumlu veya kontrast oluşturacak renkler seçin.

.hero-cta {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
}
.hero-cta:hover {
  filter: brightness(1.1);
}

CSS gradient buton tasarımı rehberimizde hover ve focus state'leri için ek teknikler bulabilirsiniz.

Radial Gradient ile Odak Noktası

Merkezden dışa doğru yayılan radial gradient, hero'da odak noktası oluşturur. Örneğin ortada parlama efekti veya kenarlara doğru kararma.

.hero-radial {
  background: radial-gradient(
    ellipse at center,
    rgba(99, 102, 241, 0.9) 0%,
    rgba(139, 92, 246, 0.6) 50%,
    rgba(17, 24, 39, 0.95) 100%
  );
}

Özet

Gradient hero section tasarımı, linear veya radial gradient, overlay, animasyon ve kontrast bilgisi ile güçlendirilir. Metin okunabilirliğini ön planda tutun, responsive davranışı test edin ve Gradient Oluşturucu ile renk paletinizi deneyin. CSS gradient text efekti rehberimizle başlıkları daha da çarpıcı hale getirebilirsiniz.