Tasarım & CSS

Doğrusal, radyal ve konik CSS gradientlerini canlı önizleme ile oluştur; Tailwind, SVG ve React çıktısı al.

Görsel CSS @keyframes animasyon oluştur. Keyframe editörü, zaman çizelgesi scrubber, 18 küratörlü şablon (fade / slide / bounce / pulse / typewriter…), CSS / Tailwind / React çıktısı.

Görsel CSS Grid layout oluştur. Sütun / satır / boşluk tanımla, named area çiz, item yerleştir, CSS / Tailwind / HTML / React olarak kopyala.

CSS yapıştır, Tailwind utility sınıfları al. En yaygın özellikleri hassasen eşler; JIT modunda arbitrary değerlere düşer.

Görsel flexbox oluşturucu. Direction / wrap / justify / align / gap ayarla; öğe bazında grow / shrink / basis / order; hazır şablon galerisi; CSS / Tailwind / HTML / React çıktısı.

Eksik genişlik / yükseklik / oran hesapla, hedef orana kırp veya letterbox uygula, yaygın ön ayarlara göz at ve CSS aspect-ratio çıktısı kopyala.

Köşe başına birim ve eliptik X/Y ile pikselince yarıçap tasarla; ya da tek bir tohumdan tekrarlanabilen organik bloblar üret.

8 katmana kadar box-shadow istifle; canlı önizleme, zengin hazır kütüphane (Material / Tailwind / nömorfizm / iOS / dekoratif) ve CSS, Tailwind, React, SCSS, JSON çıktısı.

CSS filter fonksiyonlarını (blur, brightness, contrast, hue-rotate, drop-shadow…) canlı önizleme ile birleştir; CSS / Tailwind / React / SCSS / JSON çıktısı.

Evrensel CSS birim dönüştürücü — px ↔ rem ↔ em ↔ vw ↔ vh ↔ vmin ↔ vmax ↔ pt ↔ pc ↔ % ↔ ch ↔ ex ↔ cm ↔ mm ↔ in. Tek ve toplu mod, Tailwind ipuçları.

Backdrop blur, doygunluk, opaklık, kenarlık ve gölge ile buzlu cam kartlar tasarla — gradient, fotoğraf, desen veya renk arka planlarında canlı önizleme.

Soft-UI neumorphism oluşturucu — tek bir base renkten açık ve koyu gölgeleri türetir, ışık kaynağı açısını seçer, convex / concave / flat / pressed modlarını destekler.

8 katmana kadar text-shadow istifle; canlı önizleme, zengin hazır şablon kütüphanesi (3D, long shadow, neon, retro wave, cyberpunk…) ve CSS / Tailwind / React / SCSS / JSON çıktısı.

12 oran ön ayarı, fluid clamp() çıktısı, çoklu viewport önizlemesi ve CSS / Tailwind / SCSS / JSON / design token çıktısı ile modüler tipografi ölçeği.

Easing eğrilerini görsel olarak ayarlayın, örnek ilerlemeleri görün ve son cubic-bezier çıktısını kopyalayın.

Katmanlı shadow, frosted glass kartlar ve gradient'leri tek bir CSS stüdyosunda oluşturun.

Canlı canvas üzerinde köşeleri sürükle, 25+ poligon ön ayarından seç ve üretime hazır CSS, Tailwind veya SVG clip-path kodu kopyala.

Border tekniğiyle saf CSS üçgenler üret — yön seç, boyutu ayarla, CSS / Tailwind / React / SCSS olarak kopyala.