UI Kartları İçin Gradient Teknikleri

UI kartları (feature cards, pricing cards, testimonial cards) modern web ve uygulama arayüzlerinde yaygın kullanılıyor. Gradient kullanımıyla kartlara derinlik, premium his ve görsel zenginlik katabilirsiniz. Bu rehberde hafif gradient'ler, fiyat kartları, özellik kartları, referans kartları, gradient border ve hover efektleri konularını inceliyoruz.

Derinlik İçin Hafif Gradient'ler

En sade ve etkili teknik, kart arka planına çok hafif bir gradient eklemektir. Aynı rengin farklı tonları veya komşu renkler kullanılır; böylece kart düz bir blok yerine hafif derinlik kazanır. Genellikle %3–8 arası parlama veya gölge geçişi yeterlidir.

CSS

.card-subtle-gradient {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f8fafc 50%,
    #f1f5f9 100%
  );
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

CSS gradient nedir rehberimizde linear-gradient sözdizimini detaylı inceleyebilirsiniz. 135deg açısı genellikle sol üstten sağ alta doğru yumuşak bir geçiş sağlar.

Fiyat (Pricing) Kartları

Fiyat kartlarında gradient, öne çıkarılmak istenen planı vurgulamak için kullanılır. "Popüler" veya "Önerilen" plan genellikle gradient border veya gradient arka plan ile ayrılır. Ana planın gradient'i daha canlı; diğer kartlar nötr kalabilir.

CSS

.pricing-card-featured {
  position: relative;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-radius: 1rem;
  padding: 2rem;
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.3);
}

.pricing-card-featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.5;
}

Özellik (Feature) Kartları

Özellik kartlarında gradient, ikon veya üst bölümde kullanılabilir. Tüm kartı gradient yapmak yerine, başlık veya ikon alanına sınırlı gradient uygulamak daha okunaklı ve profesyonel görünüm sağlar. Gradient, kategorilere göre farklılaştırma için de kullanılabilir (güvenlik için mavi, hız için yeşil vb.).

CSS

.feature-card .icon-wrapper {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
  color: white;
  margin-bottom: 1rem;
}

.feature-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}

Referans (Testimonial) Kartları

Referans kartlarında gradient genellikle arka planda hafif veya kenar/çerçeve olarak kullanılır. Kullanıcı yorumları için sıcak, güven verici tonlar tercih edilir. Gradient overlay ile fotoğraf arkasına hafif renk katmanı eklenebilir.

Gradient Border ile Kartlar

Gradient border doğrudan CSS border ile uygulanamaz; bunun yerine border-image veya pseudo-element kullanılır. En yaygın yöntem: kartı saran ek bir div/pseudo-element'e gradient vermek ve padding ile iç boşluk bırakmaktır.

CSS

.card-gradient-border {
  position: relative;
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
}

.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}

CSS gradient border rehberimizde alternatif yöntemleri bulabilirsiniz.

Hover Efektleri

Kartlarda hover ile gradient yoğunluğunu artırmak veya hafif scale/parlama eklemek etkileşimi güçlendirir. transition ile yumuşak geçiş sağlayın; ani değişimler kullanıcıyı rahatsız edebilir.

CSS

.card-hover-gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transition: all 0.3s ease;
}

.card-hover-gradient:hover {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.25);
}

CSS gradient buton tasarımı rehberimizde hover ve focus stilleri için ek ipuçları bulabilirsiniz.

Koyu Tema Kartlarında Gradient

Koyu temada gradient kartlar farklı davranır. Açık tonlardan koyuya geçiş yerine, koyu tonlar arasında hafif parıltı veya renkli kenar ışığı kullanın. Yüksek doygunluklu renkler karanlık arka planda göz yorar; düşük doygunluk veya pastel gradient'ler daha rahattır. Dark mode'da kart border'ı için gradient, içerikten ayrılmayı sağlar; ancak çok parlak olmamalıdır.

Glassmorphism ve Neomorphism ile Kombinasyon

Gradient kartlar, glassmorphism (bulanık cam efekti) veya neomorphism (yumuşak gölge) ile birleştirilebilir. Glassmorphism'de gradient arka plan üzerinde backdrop-filter: blur() kullanılır; neomorphism'de gradient gölgelerle derinlik verilir. Glassmorphism ve neomorphism rehberimizde bu stilleri inceleyebilirsiniz.

Özet

UI kartlarında gradient kullanımı derinlik, vurgu ve premium his sağlar. Hafif gradient'lerle başlayın; fiyat ve özellik kartlarında kontrollü kullanım yapın. Gradient border ve hover efektleri etkileşimi artırır. Gradient Oluşturucu ile renk paletinizi deneyebilirsiniz.