Tailwind CSS'te bir öğeyi bulanıklaştırmak için blur-sm, blur-lg gibi sınıfları; parlaklık, karşıtlık ve renk efektleri için brightness-150, contrast-125, grayscale, sepia gibi filtre sınıflarını kullanırsınız. Öğenin kendisini değil arkasında kalan alanı bulanıklaştırmak, yani cam efekti elde etmek için backdrop-blur-md gibi backdrop-* sınıfları vardır. Filtre sınıfları birbirini ezmez: blur-xs grayscale yazdığınızda iki efekt birlikte uygulanır.
Bu yazıda bulanıklık ölçeğini, filtrelerin tek bir filter değerinde nasıl birleştiğini, drop-shadow ile kutu gölgesi arasındaki farkı, filtreleri kaldırmayı ve cam efektli kart ile yarı saydam üst menü örneklerini anlatıyoruz. Gösterilen CSS çıktıları Tailwind CSS v4.3.5 standalone CLI ile derlendi. Uzun filter satırı her filtre sınıfında aynı olduğu için bir kez açıklayıp tekrarlıyoruz. Serinin diğer yazıları için Tailwind öğrenme rehberine bakabilirsiniz.
Filtreler tek değerde nasıl birleşir?
CSS'te filter tek bir özelliktir; iki ayrı kural filter: blur(4px) ve filter: grayscale(100%) yazsa sonradan gelen öncekini ezer. Tailwind bunu her filtre türü için ayrı bir değişken kullanarak çözer. Her filtre sınıfı yalnızca kendi değişkenini ayarlar, ardından tüm değişkenleri sırayla birleştiren aynı filter satırını yazar.
<img class="blur-xs grayscale" src="dag.jpg" alt="">v4.3.5 ile derlenen CSS:
@layer utilities {
.blur-xs {
--tw-blur: blur(var(--blur-xs));
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
}var(--tw-blur, ) ifadesindeki virgülden sonraki boş yedek değer kritik ayrıntıdır: değişken tanımlı değilse yerine hiçbir şey yazılmaz ve o filtre listeden düşer. Böylece yalnızca ayarladığınız filtreler sonuca girer. Tema bölümünde --blur-xs: 4px değeri yer alır. Birleşme sırası sabittir: bulanıklık, parlaklık, karşıtlık, gri tonlama, ton döndürme, ters çevirme, doygunluk, sepya ve en sonda drop shadow. Belge birleştirilebilen filtreleri tam olarak bu dokuz tür olarak sayar.
Bulanıklık ölçeği: blur-xs ile blur-3xl arası
blur-* sınıfları değerlerini --blur-* tema değişkenlerinden alır. v4.3.5 tema dosyasındaki değerler şunlardır:
| Sınıf | Değer |
|---|---|
| blur-xs | 4px |
| blur-sm | 8px |
| blur-md | 12px |
| blur-lg | 16px |
| blur-xl | 24px |
| blur-2xl | 40px |
| blur-3xl | 64px |
| blur-none | boş değer, bulanıklık yok |
Ek almayan blur sınıfı da hâlâ çalışır. Derlemede blur ile blur-sm aynı 8px bulanıklığı üretir; fark yalnızca birinin değeri sabit yazması, diğerinin tema değişkenini kullanmasıdır.
<img class="blur" src="a.jpg" alt="">
<img class="blur-sm" src="b.jpg" alt="">v4.3.5 ile derlenen CSS:
@layer utilities {
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.blur-sm {
--tw-blur: blur(var(--blur-sm));
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
}Resmî yükseltme rehberi, v3'teki blur-sm görünümünün v4'te blur-xs, v3'teki blur görünümünün ise blur-sm adını aldığını belirtir. Aynı kaydırma backdrop-blur ve drop-shadow sınıfları için de geçerlidir. Bazı Türkçe özetlerde blur ile blur-sm farklı güçte gösterilir; v4.3.5 derlemesi ikisinin aynı olduğunu gösteriyor. Ad değişiklikleri Tailwind v4 yenilikleri yazısında toplu olarak listeleniyor.
Diğer filtreler: parlaklık, karşıtlık, renk
Bulanıklık dışındaki filtrelerde sayı çoğunlukla yüzde olarak yorumlanır. Aşağıdaki tablodaki CSS değerleri v4.3.5 derlemesinden alındı.
| Sınıf | Üretilen filtre | Etkisi |
|---|---|---|
| brightness-150 | brightness(150%) | Parlaklığı artırır; 100 altı karartır |
| contrast-125 | contrast(125%) | Karşıtlığı artırır |
| grayscale | grayscale(100%) | Tamamen gri tonlama |
| grayscale-0 | grayscale(0%) | Gri tonlamayı kaldırır |
| hue-rotate-90 | hue-rotate(90deg) | Renk tonunu 90 derece döndürür |
| invert | invert(100%) | Renkleri tersine çevirir |
| saturate-150 | saturate(150%) | Doygunluğu artırır |
| sepia | sepia(100%) | Sepya tonu verir |
Ek almayan grayscale, invert ve sepia sınıfları tam (yüzde 100) etki verir. Ölçekte olmayan bir değer için köşeli parantez kullanılır; örneğin brightness-[1.75] sınıfı brightness(1.75) üretir.
Üzerine gelince renklenen logo
Filtrelerin en yaygın kullanımlarından biri, bir referans ya da iş ortağı logosunu gri gösterip üzerine gelindiğinde renklendirmektir. transition sınıfının geçiş listesinde filter özelliği bulunduğu için değişim yumuşak olur.
<img class="grayscale transition hover:grayscale-0" src="logo.png" alt="">v4.3.5 ile derlenen CSS (filtre kuralları):
@layer utilities {
/* (kısaltıldı) */
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
@media (hover: hover) {
.hover\:grayscale-0:hover {
--tw-grayscale: grayscale(0%);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
}
}hover:grayscale-0 yalnızca --tw-grayscale değişkenini değiştirir. Aynı görselde ayrıca bir bulanıklık sınıfı olsaydı o değişken dokunulmadan kalır ve bulanıklık sürerdi. Kısaltılan .transition kuralının tam özellik listesi transition, duration ve ease yazısında gösteriliyor.
drop-shadow: şeklin kendisine gölge
drop-shadow-* sınıfları da bir filtredir. Kutu gölgesinden (shadow-*) farkı, gölgeyi öğenin dikdörtgen kutusuna değil görünen şekline düşürmesidir. Belge bu yüzden drop shadow'u metin ve SVG gibi düzensiz şekiller için önerir; normal kutular için kutu gölgesini işaret eder. Renk ve opaklık, kutu gölgesindeki gibi çalışır.
<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50"></svg>
<svg class="drop-shadow-xl/50"></svg>v4.3.5 ile derlenen CSS:
@layer utilities {
.fill-cyan-500 {
fill: var(--color-cyan-500);
}
.drop-shadow-xl\/50 {
--tw-drop-shadow-alpha: 50%;
--tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 50%)));
--tw-drop-shadow: var(--tw-drop-shadow-size);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.drop-shadow-lg {
--tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
--tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.drop-shadow-cyan-500\/50 {
--tw-drop-shadow-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-drop-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-cyan-500) 50%, transparent) var(--tw-drop-shadow-alpha), transparent);
}
--tw-drop-shadow: var(--tw-drop-shadow-size);
}
}Bu çıktı ilginç bir ayrıntı gösteriyor. drop-shadow-lg iki değişken hazırlar: renksiz kullanım için --tw-drop-shadow doğrudan tema değerini (--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15)) kullanır; --tw-drop-shadow-size ise rengi değişkenden okuyan bir sürümdür. Renk sınıfı drop-shadow-cyan-500/50 eklendiğinde hem rengi ayarlar hem de --tw-drop-shadow değişkenini renk okuyabilen bu sürüme bağlar. Belge, varsayılan drop shadow opaklıklarının yüzde 15 ya da altında olduğunu, /50 gibi bir değerle gölgenin belirginleşeceğini söyler. SVG renklendirme sınıfı fill-* de bu örnekte görülüyor.
Kutu gölgeleri, iç gölgeler ve halkalar shadow ve ring yazısında ayrıntılı olarak anlatılıyor.
Filtreyi kaldırmak: filter-none ve blur-none
Filtreleri bir breakpoint ya da durumda kaldırmanın iki yolu vardır ve farklı çalışırlar.
<img class="blur-md brightness-150 md:filter-none" src="a.jpg" alt="">
<img class="blur-sm md:blur-none" src="b.jpg" alt="">v4.3.5 ile derlenen CSS (breakpoint kısmı):
@layer utilities {
/* (kısaltıldı) */
@media (width >= 48rem) {
.md\:blur-none {
--tw-blur: ;
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.md\:filter-none {
filter: none;
}
}
}filter-none doğrudan filter: none yazar ve öğedeki tüm filtreleri, drop shadow dahil, tek seferde kaldırır. blur-none ise yalnızca --tw-blur değişkenini boşaltır; diğer filtreler, örneğin parlaklık, yerinde kalır. Bir görselin yalnızca bulanıklığını kaldırmak istiyorsanız blur-none, her şeyi sıfırlamak istiyorsanız filter-none doğru seçimdir. md: varyantının ürettiği @media (width >= 48rem) sorgusu responsive tasarım yazısında anlatılıyor.
backdrop-filter: arkadaki alanı bulanıklaştırmak
backdrop-* sınıfları öğenin kendisine değil, arkasında görünen içeriğe filtre uygular. Etkinin görülmesi için öğenin arka planının saydam ya da yarı saydam olması gerekir; tam opak bir arka plan arkadaki her şeyi örter. Belge birleştirilebilen backdrop filtrelerini şöyle sayar: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate ve sepia. Listede drop shadow yoktur, buna karşılık backdrop-opacity-* vardır.
Bulanıklık ölçeği aynı --blur-* değişkenlerini kullanır: backdrop-blur-xs 4px, backdrop-blur-sm 8px, backdrop-blur-md 12px ve böyle devam eder.
Uygulamalı örnek: cam efektli kart
Arka planda bir görsel, önünde yarı saydam beyaz zeminli, ince yarı saydam kenarlıklı ve arkasını bulanıklaştıran bir kart, cam efektinin klasik kurgusudur.
<div class="bg-[url(/img/dag.jpg)] bg-cover p-8">
<div class="rounded-xl border border-white/20 bg-white/30 p-6 backdrop-blur-md">
Cam efektli kart
</div>
</div>v4.3.5 ile derlenen CSS (kart kuralları):
@layer utilities {
/* (kısaltıldı) */
.border-white\/20 {
border-color: color-mix(in srgb, #fff 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
}
}
.bg-white\/30 {
background-color: color-mix(in srgb, #fff 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}
}
.backdrop-blur-md {
--tw-backdrop-blur: blur(var(--blur-md));
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
}Üç bileşen birlikte çalışır. bg-white/30 kartı yüzde 30 opak beyaz yapar, böylece arkadaki görsel görünür kalır. backdrop-blur-md o görünen kısmı 12px bulanıklaştırır. border-white/20 ise kartın kenarını yumuşak bir çizgiyle belirginleştirir. CLI, backdrop-filter özelliğini ön ekli -webkit-backdrop-filter sürümüyle birlikte yazar; bunun için ayrı bir şey yapmanız gerekmez. Opaklık modifier'ının ürettiği color-mix() ifadesi renk opaklığı yazısında anlatılıyor.
Uygulamalı örnek: kaydırırken yarı saydam üst menü
Sayfa kaydırılırken üstte sabit kalan bir menünün arkasından içeriğin bulanık geçmesi de aynı tekniğin bir uygulamasıdır. Örnekte bulanıklığa ek olarak backdrop-saturate-150 ile arkadaki içeriğin doygunluğu da artırılıyor.
<header class="sticky top-0 bg-white/70 backdrop-blur-sm backdrop-saturate-150"></header>v4.3.5 ile derlenen CSS (backdrop kuralları):
@layer utilities {
/* (kısaltıldı) */
.backdrop-blur-sm {
--tw-backdrop-blur: blur(var(--blur-sm));
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
.backdrop-saturate-150 {
--tw-backdrop-saturate: saturate(150%);
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
}İki backdrop sınıfı da kendi değişkenini ayarlar ve aynı birleşik değeri yazar; sonuçta bulanıklık ve doygunluk birlikte uygulanır. sticky top-0 menünün yapışkan konumunu sağlar; sayfa iskeleti kalıpları sayfa düzeni yazısında bulunuyor.
Kendi bulanıklık değerinizi tanımlamak
Ölçeğe yeni bir değer eklemek için @theme içinde --blur-* değişkeni tanımlarsınız. Belgeye göre bu değişken hem blur-* hem de backdrop-blur-* sınıflarını besler. Tek seferlik değerler için köşeli parantez yeterlidir.
@import "tailwindcss";
@theme {
--blur-2xs: 2px;
}<img class="blur-2xs blur-[2px] brightness-[1.75]" src="a.jpg" alt="">v4.3.5 ile derlenen CSS:
@layer utilities {
.blur-2xs {
--tw-blur: blur(var(--blur-2xs));
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.blur-\[2px\] {
--tw-blur: blur(2px);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.brightness-\[1\.75\] {
--tw-brightness: brightness(1.75);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
}Aynı öğede iki bulanıklık sınıfı olduğunda ikisi de --tw-blur değişkenine yazar ve CSS dosyasında sonra gelen kazanır; böyle bir durumda filtreler toplanmaz. Tema değişkenlerinin ad alanları @theme yazısında anlatılıyor.
CSS değişkeni ve SVG filtresiyle çalışmak
Filtre değerini çalışma anında değiştirmek isterseniz, örneğin bir kaydırıcıyla bulanıklık miktarını ayarlayacaksanız, değeri bir CSS değişkenine bağlayabilirsiniz. Parantezli yazım var() fonksiyonunu sizin yerinize ekler. Tailwind'in hazır filtreleriyle ifade edilemeyen bir SVG filtresi için filter-[...] keyfi değeri kullanılır.
<img class="blur-(--bulaniklik) filter-[url('filtreler.svg#kumlu')]" src="a.jpg" alt="">
<div class="backdrop-blur-sm md:backdrop-filter-none"></div>v4.3.5 ile derlenen CSS:
@layer utilities {
.blur-\(--bulaniklik\) {
--tw-blur: blur(var(--bulaniklik));
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.filter-\[url\(\'filtreler\.svg\#kumlu\'\)\] {
filter: url('filtreler.svg#kumlu');
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(var(--blur-sm));
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
@media (width >= 48rem) {
.md\:backdrop-filter-none {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
}Burada önemli bir fark var: blur-(--bulaniklik) birleşik filtre zincirine katılır, filter-[...] ise filter özelliğini doğrudan yazar ve zinciri kullanmaz. Bu yüzden ikisi aynı öğede bulunduğunda CSS dosyasında sonra gelen kural geçerli olur ve diğer filtreler devre dışı kalır; örnekte SVG filtresi kuralı sonra geldiği için bulanıklık uygulanmaz. Bir SVG filtresini Tailwind filtreleriyle birlikte kullanmanız gerekiyorsa onları ayrı öğelere, örneğin bir sarmalayıcıya ve içteki görsele dağıtın. Backdrop tarafında backdrop-filter-none, iki özelliği birden none yapar ve tüm backdrop filtrelerini kaldırır.
Sık yapılan hatalar
- Opak arka planla backdrop-blur kullanmak:
bg-white backdrop-blur-mdyazdığınızda arka plan arkadaki her şeyi örttüğü için bulanıklık görünmez.bg-white/30gibi yarı saydam bir arka plan kullanın. - Öğeyi bulanıklaştırmak isterken arkasını bulanıklaştırmak:
blur-*öğenin kendisini ve içindeki metni bulanıklaştırır;backdrop-blur-*yalnızca arkasını. Cam efektinde metnin okunması için ikincisini kullanın. - Kendi CSS'inizde filter yazmak: Aynı öğeye doğrudan
filter: blur(4px)yazmak Tailwind'in birleştirdiği tüm filtre değişkenlerini ezer. Özel değer için keyfi değer sözdizimini ya dafilter-[...]sınıfını kullanın. - blur-none ile her şeyin sıfırlanmasını beklemek:
blur-noneyalnızca bulanıklığı kaldırır; tüm filtreler içinfilter-none, tüm backdrop filtreleri içinbackdrop-filter-nonegerekir. - v3 adlarıyla aynı görünümü beklemek: v4'te
blur-sm, v3'tekiblurkadar güçlüdür; eski hafif bulanıklık içinblur-xskullanın.
Sık Sorulan Sorular
Tailwind'de blur kaç piksel?
v4.3.5'te blur-xs 4px, blur-sm ve ek almayan blur 8px, blur-md 12px, blur-lg 16px, blur-xl 24px, blur-2xl 40px, blur-3xl 64px bulanıklık üretir.
Birden fazla filtre aynı anda kullanılabilir mi?
Evet. Her filtre sınıfı ayrı bir değişkene yazdığı için blur-sm grayscale contrast-125 gibi bir birleşimde üç filtre de uygulanır. Aynı türden iki sınıf ise birbirini ezer.
Cam efekti için hangi sınıflar gerekir?
En az iki sınıf: yarı saydam bir arka plan (bg-white/30) ve bir backdrop bulanıklığı (backdrop-blur-md). İnce yarı saydam bir kenarlık (border border-white/20) ve yuvarlak köşeler (rounded-xl) görünümü tamamlar.
drop-shadow ile shadow arasında ne fark var?
shadow-* CSS box-shadow özelliğini kullanır ve öğenin dikdörtgen kutusuna gölge düşürür. drop-shadow-* bir filtredir ve görünen şeklin çevresine gölge düşürür; saydam alanları olan SVG ve görseller için uygundur.
Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.
İlgili içerikler: Tailwind öğrenme rehberi · Shadow ve ring · Renk opaklığı · Transition ve duration · Sayfa düzeni · Tailwind v4 yenilikleri