CSS Glitch Yazı

Cihazında canlı önizlemeli, saf CSS glitch yazı efekti oluştur. Metni, yoğunluğu, hızı ve kanal renklerini ayarla; başlıklar veya hero alanları için HTML ve CSS kopyala.

GizliTarayıcıdaAnındaLimitsiz

Metin

Yoğunluk (4px)

Hız (2.5s)

Temel yazı rengi

Kanal A rengi

Kanal B rengi

Önizleme arka planı

Önizleme

GLITCH

Animasyon sürekli döner. Yoğunluk ve renkler düzenine uyduğunda parçacığı kopyala.

HTML ve CSS

/* HTML */
<p class="easy24-glitch" data-text="GLITCH">GLITCH</p>

/* CSS */
.easy24-glitch {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #eef1f6;
  font-size: clamp(2rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  user-select: none;
}

.easy24-glitch::before,
.easy24-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.easy24-glitch::before {
  left: 4px;
  text-shadow: -4px 0 #00fff9;
  animation: easy24-glitch-a 2.5s infinite linear alternate-reverse;
  clip-path: inset(0 0 58% 0);
}

.easy24-glitch::after {
  left: -4px;
  text-shadow: 4px 0 #ff003c;
  animation: easy24-glitch-b 2.75s infinite linear alternate-reverse;
  clip-path: inset(42% 0 0 0);
}

@keyframes easy24-glitch-a {
  0% { clip-path: inset(20% 0 60% 0); transform: translate(0); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(-2px, 2px); }
  40% { clip-path: inset(10% 0 50% 0); transform: translate(4px, -2px); }
  60% { clip-path: inset(40% 0 30% 0); transform: translate(-4px, 4px); }
  80% { clip-path: inset(70% 0 5% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(15% 0 55% 0); transform: translate(0); }
}

@keyframes easy24-glitch-b {
  0% { clip-path: inset(65% 0 10% 0); transform: translate(0); }
  25% { clip-path: inset(10% 0 55% 0); transform: translate(4px, -2px); }
  50% { clip-path: inset(45% 0 20% 0); transform: translate(-2px, 4px); }
  75% { clip-path: inset(5% 0 70% 0); transform: translate(2px, 2px); }
  100% { clip-path: inset(50% 0 15% 0); transform: translate(0); }
}

Yalnızca HTML

<p class="easy24-glitch" data-text="GLITCH">GLITCH</p>

HTML ve CSS’i sayfana yapıştır. Efekt göreli konumlandırılmış bir konak ister ve kısa büyük harfli başlıklarda en iyi sonucu verir.

Nasıl çalışır

Başlık metnini gir

En fazla 32 karakter yaz. RGB ayrımı ve clip animasyonu başlayınca kısa sözcükler ve kısaltmalar daha net okunur.

Yoğunluk, hız ve renkleri ayarla

Daha güçlü kayma için yoğunluğu artır, döngü için hızı değiştir, temel ve kanal renklerini seç. Önizleme düzenlerken güncellenir.

Parçacığı kopyala veya indir

Birleşik HTML ve CSS’i kopyala, yalnızca HTML’i al veya glitch.css indir. Her şey bu sekmede çalışır.

CSS Glitch Yazı nedir?

CSS Glitch Yazı, rastgele parçacık aramadan cyberpunk tarzı bir başlık tasarlamanı kolaylaştırır. Küçük bir HTML ve CSS çifti verir; dürüst sınırlarla: bu dekoratif bir hareket efektidir, tam bir video glitch hattı değildir ve koyu arka plan üzerinde kısa metinde en net kalır.

Neden bu araç

Canlı animasyon önizlemeli saf bir CSS glitch başlığı üretir.
Yoğunluk, döngü hızı, temel renk ve iki kanal rengini kontrol etmeni sağlar.
Beş hazır renk ve hareket ayarıyla hızlı başlamanı sağlar.
Metni HTML data özniteliğine ve işaretlemeye güvenli biçimde yazar.
HTML ve CSS’i birlikte kopyalamanı veya yalnızca HTML’i almanı sağlar.
İstediğin kadar kullanabilirsin. Ücretsiz planda günlük kullanım limiti yoktur.

Sorular

CSS Glitch Yazı ne yapar?

Renk kanallarını ayıran ve katmanları zamanla kırpan animasyonlu bir glitch başlığı için HTML ve CSS üretir. Hareketi önizler ve parçacığı projene yapıştırırsın.

JavaScript gerekir mi?

Hayır. Hareket yalnızca CSS keyframe ve pseudo elementlerle çalışır. Efektin kendisi için çalışma zamanı betiği gerekmez.

Metni neden kısa tutmalıyım?

Uzun çok satırlı cümleler katmanlar kayınca bulanık görünebilir. Kısa başlıklar, logolar ve tek sözcükler glitch’i okunaklı tutar.

Her tarayıcıda çalışır mı?

Modern tarayıcılar buradaki clip path ve animasyonları destekler. Eski tarayıcılar ayrık katmanlar olmadan yalnızca durağan temel metni gösterebilir.

Yazı tipini değiştirebilir miyim?

Evet. CSS’i yapıştırdıktan sonra marka tipografine uyması için .easy24-glitch üzerinde font family ayarla.

Günlük limit var mı?

Hayır. Bu aracın ücretsiz planda günlük kullanım limiti yoktur.

Easy24 işine yaradıysa kahve ısmarla

Araçlar ücretsiz kalır. Teşekkür etmek istersen tek seferlik bağış yapabilirsin.

Kahve ısmarla

Benzer Geliştirici araçları

Tümünü gör

JSON Biçimlendirici

Geliştirici

JSON'u tarayıcıda güzelleştir, küçült, doğrula ve anahtarları sırala. 2 veya 4 boşluk girinti, dosya içe aktarma ve indirme.

Aç

Meta Etiket Üretici

Geliştirici

SEO başlık, açıklama, Open Graph, Twitter Card ve canonical etiketlerini canlı sosyal önizleme ile oluştur. Tarayıcıda çalışır.

Aç

CSS Gradyan Oluşturucu

Geliştirici

Doğrusal ve radyal CSS gradyanları tasarla; üç renk durağına kadar. Canlı önizleme, hazır şablonlar, hex girişi, kopyala veya indir.

Aç