🌈 CSS Degrade Yapıcı — Görsel Degrade Oluştur

Create linear, radial, and conic CSS gradients visually. Multi-stop color picker, angle control, live preview. Copy CSS or Tailwind code free.

Design your perfect CSS gradient without writing a single line of code. Add color stops, drag them to reposition, pick linear/radial/conic type, adjust the angle — and copy the ready-to-use CSS or Tailwind classes instantly.

Type

Angle: 135°

Color Stops

How to Use

Choose gradient type

Select Linear, Radial, or Conic from the type selector, then set the angle or position.

Add color stops

Click each stop to pick a color. Add more stops with the + button or drag to reposition them.

Copy the CSS

The live preview updates instantly. Click Copy CSS to get the ready-to-use background declaration.

Frequently Asked Questions

What is a CSS gradient? +

A CSS gradient creates smooth transitions between two or more colors without using an image. Gradients are defined with background-image (or background shorthand) using linear-gradient(), radial-gradient(), or conic-gradient() functions.

What is the difference between linear, radial, and conic gradients? +

Linear gradients transition along a straight line at any angle. Radial gradients spread outward from a center point in a circular or elliptical shape. Conic gradients rotate around a center point like a color wheel or pie chart.

How do I add multiple color stops? +

Click "Add Stop" to insert additional color stops between existing ones. Each stop has a color and a position (0–100%). You can drag stops to reposition them or click the × to remove them.

How do I use a gradient in CSS? +

Copy the generated CSS and use it as: background: linear-gradient(45deg, #ff6b6b, #4ecdc4); or apply it to background-image. Gradients can also be applied to borders, masks, and text with additional CSS techniques.

What is the Tailwind output for gradients? +

Tailwind v3 supports gradients with from-{color}, via-{color}, to-{color} utility classes combined with bg-gradient-to-{direction}. For custom colors outside the palette, use the arbitrary value syntax: from-[#ff6b6b].

Tam Rehber: CSS Degrade Oluşturucu

CSS degradeleri, görsel dosya kullanmadan iki veya daha fazla renk arasında yumuşak geçişler oluşturmanıza olanak tanır. Degradeler tarayıcı tarafından render zamanında oluşturulduğundan çözünürlükten bağımsız çalışır, anında yüklenir ve herhangi bir HTTP isteği oluşturmaz.

Üç Temel Degrade Türü

linear-gradient() — Renkler düz bir eksen boyunca akar.
radial-gradient() — Renkler merkezi bir noktadan elips veya daire şeklinde yayılır.
conic-gradient() — Renkler merkez nokta etrafında renk tekerleği gibi döner.

Doğrusal Degradeler ve Açı Söz Dizimi

linear-gradient() fonksiyonunun ilk argümanı yöndür. Açılar alttan başlayan saat yönünde bir kuralı izler: 0deg alttan yukarıya, 180deg yukarıdan aşağıya anlamına gelir:

/* Yukarıdan aşağıya */
background: linear-gradient(180deg, #e94560, #1a1a2e);

/* Köşegen */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

İki renk durağı aynı konuma yerleştirildiğinde sert durak oluşur — çizgi efektleri için idealdir:

background: linear-gradient(
  45deg,
  #f5a623 0%, #f5a623 25%,
  #ffffff 25%, #ffffff 50%
);
background-size: 40px 40px;

Radyal ve Konik Degradeler

Radyal degradeler merkezi bir noktadan dışarıya yayılır. Konik degradeler pasta grafikleri ve renk çarkları için idealdir:

/* Radyal */
background: radial-gradient(circle at 30% 40%, #ff6b6b, #4ecdc4);

/* Konik pasta grafiği */
background: conic-gradient(
  #4285f4 0deg 144deg,
  #ea4335 144deg 270deg,
  #34a853 270deg 360deg
);

Tekrarlayan Degradeler

repeating-linear-gradient() deseni sonsuz olarak döşer. Son renk durağı konumu döşeme boyutunu belirler:

background: repeating-linear-gradient(
  45deg,
  #e63946,
  #e63946 10px,
  #f1faee 10px,
  #f1faee 20px
);

@property ile Animasyonlu Degradeler

CSS Houdini @property kuralı, özel özellikleri bir türle kaydetmenize izin vererek renk interpolasyonunu mümkün kılar:

@property --renk-1 {
  syntax: '<color>';
  initial-value: #667eea;
  inherits: false;
}

.kutu {
  background: linear-gradient(135deg, var(--renk-1), #764ba2);
  transition: --renk-1 1s;
}

.kutu:hover { --renk-1: #f093fb; }

Performans İpuçları

CSS degradeleri pencere yeniden boyutlandırıldığında yeniden çizim gerektirmez. background-position animasyonundan kaçının; bunun yerine @property yaklaşımını veya sahte öğe opacity animasyonunu tercih edin.

Renk değerleri için Renk Seçici aracını kullanın.
Degrade efektlerini CSS Glassmorphism ile birleştirin.