CSS Degrade Oluşturucu

Tüm araçlar

Birden çok renk durağıyla doğrusal, radyal ve konik CSS degradeleri oluşturun ve kodu kopyalayın.

Önizleme
CSS çıktısı
background: —;

Her şey tarayıcınızda çalışır — yükleme yok, kayıt yok.

Degrade türü
deg
Renk durakları Durak eklemek için çubuğa tıklayın, taşımak için sürükleyin
Seçili durak
Durak rengi
100%
%
Hazır ayarlar

CSS Degrade Oluşturucu Hakkında

CSS Gradient Generator, tam görsel kontrolle linear, radial ve conic gradyanlar oluşturur. Gradyan çubuğuna tıklayarak renk durakları ekleyin, yeniden konumlandırmak için sürükleyin ve her durağa kendi rengini, opaklığını ve konumunu verin. Linear gradyanlar bir açı kontrolü alır; radial olanlar bir şekil (daire veya elips) ve konum; conic olanlar bir başlangıç açısı alır.

Canlı önizleme, tarayıcının tam olarak neyi render edeceğini gösterir; bir rastgeleleştirme düğmesi ve seçilmiş hazır ayarlar kümesi, boş bir tuvalden ziyade bir başlangıç noktasına ihtiyaç duyduğunuzda oradadır. Duraklar serbestçe eklenip kaldırılabilir — bir gradyanın yalnızca en az iki tanesine ihtiyacı vardır.

Görünüm doğru olduğunda, sade gradyan değerini veya tam bir CSS kuralını kopyalayın. Üretici tamamen tarayıcınızda çalışır, yükleme veya kayıt gerektirmez; bu da onu düğmeler, kahraman arka planları, kenarlıklar ve metin efektleri için hızlı bir yardımcı yapar.

CSS Degrade Oluşturucu Nasıl Kullanılır

  1. Gradyan türünü seçin: linear, radial veya conic.
  2. Açıyı (linear), şekli ve konumu (radial) veya başlangıç açısını (conic) ayarlayın.
  3. Renk durakları eklemek için gradyan çubuğuna tıklayın ve onları konuma sürükleyin.
  4. Her durağa rengini, opaklığını ve tam konumunu verin.
  5. Hızlı ilham için hazır ayarları veya rastgeleleştirme düğmesini deneyin.
  6. Gradyan değerini veya tam CSS kuralını kopyalayın.

Sıkça sorulan sorular

Linear gradyanlar renkleri bir açıda düz bir çizgi boyunca karıştırır. Radial gradyanlar bir merkez noktadan dışarıya doğru daire veya elips olarak yayılır. Conic gradyanlar renkleri bir merkez nokta etrafında süpürür — pasta grafiklerin ve renk çarklarının arkasındaki tür budur.

En az iki, pratik bir üst sınır olmadan. İki veya üç durak temiz arka planlar oluşturur; sıkı aralıklı duraklar sert renk bantları oluşturur, çizgili ve bölümlü efektlerin nasıl yapıldığı budur.

Evet — her durağın kendi opaklık kontrolü vardır. %0 opaklıktaki bir durak gradyanı söndürür; bu, renkli bir katmanı bir fotoğrafa karıştırmanın veya bir kahraman bölümünü sayfa arka planına söndürmenin standart yoludur.

Doğrudan değil — tarayıcılar gradyan değerleri arasında geçiş yapamaz. Alışılmış hileler: aşırı büyük bir gradyan üzerinde background-position'ı animasyonlaştırmak, özel bir özellikle conic bir gradyanı döndürmek veya iki katmanlı öğe arasında çapraz geçiş yapmak.

Evet, ücretsiz ve sınırsız. Tamamen tarayıcınızda çalışır, bu yüzden tasarladığınız hiçbir şey saklanmaz veya iletilmez.
Paylaş
İlgili Araçlar
E-posta İmza Oluşturucu 30 şablon arasından profesyonel bir HTML e-posta imzası tasarlayın, özelleştirin ve kaydedin. Ücretsiz
Simgeden PNG'ye Bootstrap Icons, Font Awesome ve diğerlerini özel PNG görsellerine dönüştür — ücretsiz, tarayıcında. Ücretsiz
Uygulama Simgesi Oluşturucu App Store ve Google Play için eksiksiz, mağazaya hazır bir uygulama simgesi seti oluşturun — logonuzdan üretilen birinci sınıf gradyan, mesh ve desen arka planları. Ücretsiz
Favicon Oluşturucu Bir logodan, bir yazı tipi simgesinden veya bir monogramdan eksiksiz bir favicon paketi oluşturun — favicon.ico, modern PNG'ler, Apple touch simgesi, PWA simgeleri, bir web manifesti ve HTML parçacığı. Ücretsiz
CSS Box Shadow Oluşturucu Kaydırıcılarla offset, bulanıklık, yayılım, renk, opaklık ve iç gölge seçeneklerini ayarlayarak katmanlı CSS box-shadow'lar oluşturun — gerçek bir öğede önizleyin ve yapıştırmaya hazır CSS'yi anında kopyalayın. Ücretsiz
CSS Köşe Yarıçapı Oluşturucu CSS border-radius'u canlı önizlemeyle görsel olarak tasarlayın ve üretime hazır kodu kopyalayın. Ücretsiz
Popüler aramalar
css degrade oluşturucu doğrusal degrade css oluşturucu radyal degrade css konik degrade css css arka plan degrade oluşturucu degrade renk durakları aracı css degrade açı seçici çevrimiçi degrade oluşturucu
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.
Sorun bildir

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.