İçeriğe geç
uxTools
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
px
px
px

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.

#1
px
px
px
px
#2
px
px
px
px

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.