CSS Gradyan Oluşturucu

Sürüklenebilir renk duraklarıyla doğrusal, radyal ve konik gradyanlar oluşturun; karışım modları ve kullanıma hazır CSS ile.

Ön ayarlar

Parlak bir başlangıç seçin.

Katmanlar

Derinlik için gradyanları üst üste koyun.

Katman ayarları

Geometri ve karışımı ayarlayın.

Gradyan türü

Açı135°

Enterpolasyon

Karışım modu

Renk Durakları

Eklemek için tıklayın, taşımak için sürükleyin.

Durak rengi

Konum

%

Durak rengi

Konum

%

Durak rengi

Konum

%

CSS Çıktısı

Önizlemeyle eşleşen CSS'i kopyalayın.

Renk biçimi

background-image: linear-gradient(135deg in oklch, #0B1020 0%, #2563EB 42%, #22D3EE 100%), radial-gradient(circle farthest-corner at 22% 18% in oklch, #A855F7CC 0%, #A855F700 62%, #00000000 100%);
background-blend-mode: normal, screen;

JSON yapılandırması

Yapılandırmayı dışa aktarın veya yapıştırın.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-313",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-314",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-315",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-316",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-317",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-318",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-319",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-320",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

CSS gradyanı nedir?

Sürüklenebilir renk duraklarıyla doğrusal, radyal ve konik gradyanlar oluşturun; karışım modları ve kullanıma hazır CSS ile.

CSS gradyanı, renkler arasında yumuşak bir geçişten tarayıcı tarafından oluşturulan bir görüntüdür. Render sırasında hesaplandığı için her boyuta piksellenmeden ölçeklenir ve görüntü dosyası gerektirmez.

Üç tür vardır: doğrusal (yön veya açı), radyal (merkezden çıkan daire ya da elips) ve konik (merkez etrafında dönüş). Her gradyan renk duraklarıyla tanımlanır; her durakta konum ve alfa belirtilebilir.

Birden fazla gradyan background-image içinde virgülle ayrılarak katmanlanabilir ve background-blend-mode ile birleştirilerek daha zengin dokular elde edilebilir. CSS, oklch gibi renk uzaylarında enterpolasyon da sunar.

Doğrusal gradyanlar ışık ve yönlü derinlik için idealdir.
Radyal ve konik gradyanlar spot ışıkları, halkalar ve renk tekerlekleri için kullanışlıdır.
Durak konumlarını ayarlayarak geçişleri daha keskin ya da yumuşak yapabilirsiniz.