CSS Gradyan Oluşturucu

Arka plan gradyanını görsel olarak tasarlayın ve kullanıma hazır CSS'i kopyalayın. Renk duraklarını çubuk boyunca sürükleyin, durak eklemek için çubuğa tıklayın, açıyı veya merkezi değiştirin, renkleri saydam yapın. Kod, eski tarayıcılar için düz bir yedek renk içerir.

°
%
%
Renk durakları Taşımak için bir durağı sürükleyin; eklemek için çubuğa tıklayın.
%
%
Hazır ayarlar

Nasıl kullanılır


  1. Doğrusal, dairesel veya konik seçin; ya da hazır ayar veya rastgele gradyanla başlayın.
  2. Rengini, opaklığını ve konumunu düzenlemek için bir durağa tıklayın; sürükleyin ya da yeni durak eklemek için çubuğa tıklayın.
  3. CSS'i kopyalayın ve öğenin kuralına yapıştırın.

Sık sorulan sorular


Doğrusal, dairesel ve konik gradyan arasındaki fark nedir?
Doğrusal gradyan, seçtiğiniz açıyla düz bir çizgi boyunca renk değiştirir. Dairesel gradyan bir merkezden daire veya elips biçiminde yayılır. Konik gradyan bir merkez etrafında saat ibreleri gibi döner; renk çarkları ve pasta grafikleri için kullanışlıdır.

CSS gradyanları tüm tarayıcılarda çalışır mı?
Evet. Doğrusal, dairesel ve konik gradyanlar Chrome, Edge, Firefox ve Safari'nin tüm güncel sürümlerinde önek olmadan çalışır. İlk arka plan satırı düz bir renktir ve yalnızca çok eski tarayıcılarda kullanılır.

Çizgili desen nasıl yapılır?
Her çizginin başına ve sonuna aynı renkte iki durak koyun; böylece renk karışmak yerine ani değişir. Ardından Tekrarla seçeneğini açın. Son hazır ayar bir örnektir.

🏷️ Meta Etiket Oluşturucu
🖼️ Open Graph Oluşturucu
🔗 UTM Link Oluşturucu
🔲 CSS Box Shadow (Gölge) Oluşturucu