🔲 CSS Box Shadow Generator

Design CSS box shadows visually with live preview. Control offset, blur, spread, color, and inset. Layer multiple shadows. Copy CSS one click. Free box-shadow generator.

X Offset4px

Y Offset4px

Blur12px

Spread0px

Opacity40%

Color Inset

Preview

How to Use

Adjust the sliders

Set X offset, Y offset, blur, and spread with the sliders. Toggle Inset for an inner shadow.

Pick a color

Click the color swatch to open the color picker. Adjust opacity for semi-transparent shadows.

Stack layers and copy

Add multiple shadow layers for depth. Click Copy CSS to get the complete box-shadow declaration.

Frequently Asked Questions

What are the box-shadow values? +

box-shadow takes: horizontal-offset vertical-offset blur-radius spread-radius color. Positive horizontal moves right, positive vertical moves down. Blur softens the shadow. Spread expands it. The optional inset keyword makes it an inner shadow.

What does "inset" do in box-shadow? +

The inset keyword turns the shadow from an outer drop shadow into an inner shadow that appears inside the element. Inner shadows are useful for creating pressed/sunken button effects, input field depth, and embossed designs.

Can I add multiple shadow layers? +

Yes — CSS box-shadow accepts multiple comma-separated values. Each layer adds depth. Stacking a tight hard shadow with a larger soft shadow creates realistic elevation effects like Material Design cards.

What is the difference between blur and spread? +

Blur determines how soft/fuzzy the shadow edges are (0 = hard sharp edge). Spread expands or contracts the shadow before blurring — positive spread makes the shadow larger than the element, negative shrinks it.

How do I copy the CSS to my project? +

Click the Copy CSS button to copy the full box-shadow declaration to your clipboard. The output is ready to paste directly into your stylesheet.

Tam Rehber: CSS Kutu Gölgesi Üreteci

CSS Kutu Gölgesi Üreteci, canlı önizlemeyle box-shadow bildirimleri oluşturmak için görsel bir arayüz sağlar. Kaydırıcıları sürükleyerek ofsetleri, bulanıklığı, yayılımı, rengi ve şeffaflığı ayarlayın, ardından oluşturulan CSS'i projenize kopyalayın.

box-shadow Sözdizimi

box-shadow: [inset] y-ofset d-ofset bulaniklık yayılım renk;

y-ofset — Yatay konum. Pozitif değerler gölgeyi sağa taşır.
d-ofset — Dikey konum. Pozitif değerler gölgeyi aşağı taşır.
bulanıklık — Bulanıklık yarıçapı. Sıfır sert kenarlı gölge üretir; yüksek değerler daha yumuşak gölgeler üretir.
yayılım — Gölgeyi genişletir veya daraltır.
renk — Şeffaflık için rgba() dahil geçerli herhangi bir CSS rengi.
inset — Gölgeyi öğenin içine taşır, girintili bir görünüm oluşturur.

Virgülle Ayrılmış Çoklu Gölgeler

CSS, virgülle ayırarak tek bir öğeye istediğiniz sayıda gölge eklemenize olanak tanır. Gölgeler önden arkaya uygulanır — listedeki ilk gölge üstte görünür. Gerçekçi yükseklik efektleri bu şekilde oluşturulur.

Nömorfizm Oluşturma

Nömorfizm (yumuşak UI), arka planla eşleşen eleman rengine uygulanan iki zıt gölge — biri açık, biri koyu — kullanır:

/* Işık kaynağı sol üstten */
box-shadow:
  6px 6px 12px rgba(0, 0, 0, 0.15),
  -6px -6px 12px rgba(255, 255, 255, 0.7);

Kart Yükseklik Sistemleri

Material Design, 24 derinlik seviyesine sahip katmanlı bir yükseklik sistemi tanımlar. Pratikte hepsine ihtiyacınız yoktur — çoğu tasarım sistemi 3 ila 5 seviye uygular: dinlenme, yükseltilmiş, kayan, modal ve kaplama. Üretici, bu değerleri göz kararıyla eşleştirmenize ve tasarım token sisteminde kullanmak üzere CSS özel özellikleri olarak dışa aktarmanıza olanak tanır.

Performans: Kompozit Katman vs Yeniden Boyama

Kutu gölgeleri değiştiğinde yalnızca kompozit değil, yeniden boyamayı tetikler. Animasyonlu gölgeler için box-shadow'u doğrudan canlandırmak, tarayıcıyı her karede katmanı yeniden boyamaya zorlar; bu da karmaşık sayfalarda kare hızını düşürebilir.

İlgili Araçlar

Gölgelerle bulanıklık, şeffaflık ve kenarlıkları birleştiren glassmorfizm UI efektleri için CSS Glassmorfizm üreticisine bakın. Gölge katmanlarınızı degrade arka planlarla eşleştirmek için Degrade Üreteci ideal bir tamamlayıcıdır.