Tasarım & CSS

CSS Box Shadow Üretici

Çok katmanlı gölgeleri görsel olarak oluştur — her katmanın konum, bulanıklık, yayılım ve rengini ayarla; hazır şablon seç; CSS, Tailwind, React inline stil, SCSS veya JSON çıktısını tek tıkla kopyala — hepsi tarayıcıda.

Canlı önizleme

Arka planı açık, koyu, şeffaf damalı ya da özel renk arasında değiştir — kutu anında güncellenir.

Önizleme

Genişlik

Yükseklik

Köşe yarıçapı

Kutunun içinde örnek metin göster

Hazır kütüphane

Material yükseklikleri, Tailwind varsayılanları, nömorfizm, iOS / macOS dokunuşları ve dekoratif gölgeler.

Material yükseklik

Tailwind

Nömorfizm

iOS ve macOS

Dekoratif

Gölge katmanları

2 / 8

En fazla 8 katman istifle. İlk katman en üstte, son katman en altta görünür — ok tuşlarıyla sırala.

Yatay konum

Dikey konum

Bulanıklık

Yayılım

Saydamlık: 10%

İç gölge

Yatay konum

Dikey konum

Bulanıklık

Yayılım

Saydamlık: 10%

İç gölge

Kod çıktısı

CSS, Tailwind sınıfı (tanınırsa adıyla, değilse arbitrary value), React inline stil, SCSS veya JSON.

box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);

Kayıtlı gölgeler

Mevcut katmanları bir isimle kaydet, dilediğinde tekrar yükle. Yalnızca senin tarayıcında durur.

Henüz kayıt yok — yukarıdan ad ver ve Kaydet'e bas.