Live Chat CSS Editor
Login untuk mengakses dashboard dan mulai kustomisasi chat stream kamu.
Masuk dengan Google
YouTube Live Chat CSS Editor
OBS READY
Free
Upgrade — Rp 100.000
Logout
Posisi & Ukuran Chat
▼
Lebar Container Chat (px, 0 = auto)
0px
Tinggi Container Chat (px, 0 = auto)
0px
Posisi X (kiri ↔ kanan, px)
0px
Posisi Y (atas ↕ bawah, px)
0px
Offset X Nama User (px)
0px
Offset Y Nama User (px)
0px
Offset X Teks Pesan (px)
0px
Offset Y Teks Pesan (px)
0px
Animasi
▼
Aktifkan Animasi Masuk
Jenis Animasi
Fade In
Slide dari Kiri
Scale Up (Zoom)
Bounce (Loncat)
Rubber Band (Elastis)
Roll In (Menggelinding)
Flip X (Kartu atas-bawah)
Flip Y (Kartu kiri-kanan)
Light Speed (Nyerempet)
Jack In The Box (Pop Muter)
Tada (Goyang)
Back In (Dari Jauh)
Durasi (ms)
300ms
Background Chat
▼
Warna Background Pesan
Opacity Background Pesan (%)
50%
Border Radius (px)
0.5em
Padding Atas (px)
6px
Padding Bawah (px)
6px
Padding Kiri (px)
6px
Padding Kanan (px)
10px
Jarak Antar Pesan (px)
4px
— Ukuran Item Pesan (0 = auto) —
Width (px)
0px
Min Width (px)
0px
Max Width (px)
0px
Min Height (px)
0px
Max Height (px)
0px
👤 Viewer (Default)
▼
Nama di atas pesan (vertikal)
— Nama User —
Warna Teks Nama (Viewer biasa)
Background Nama
Opacity Background Nama (%)
0%
Border Radius Nama (px)
0em
Border Nama
None
Solid
Dashed
Dotted
Double
Groove
Ridge
Ketebalan Border Nama (px)
1px
Warna Border Nama
Padding Nama Vertikal (px)
0px
Padding Nama Horizontal (px)
0px
Ukuran Font Nama (px)
11pt
— Ukuran Nama (0 = auto) —
Min Width Nama (px)
0px
Max Width Nama (px)
0px
Min Height Nama (px)
0px
Max Height Nama (px)
0px
— Teks Pesan —
Warna Teks Pesan
Background Pesan
Opacity Background Pesan (%)
0%
Border Radius Pesan (px)
0em
Border Pesan
None
Solid
Dashed
Dotted
Double
Groove
Ridge
Ketebalan Border Pesan (px)
1px
Warna Border Pesan
Padding Pesan Vertikal (px)
0px
Padding Pesan Horizontal (px)
0px
Ukuran Font Pesan (px)
11pt
— Ukuran Teks Pesan (0 = auto) —
Min Width Pesan (px)
0px
Max Width Pesan (px)
0px
Min Height Pesan (px)
0px
Max Height Pesan (px)
0px
Font Family
Segoe UI
Arial
Roboto
Comic Sans
Courier New
Impact
Text Shadow - Warna
Text Shadow - Blur (px)
2px
👑 Owner
▼
Warna Nama
Warna Teks Pesan
Background
Opacity Background (%)
10%
Tampilkan Badge
Ukuran Badge (px)
18px
Offset X Badge (px)
0px
Offset Y Badge (px)
0px
🛡️ Moderator
▼
Warna Nama
Warna Teks Pesan
Background
Opacity Background (%)
10%
Tampilkan Badge
Ukuran Badge (px)
18px
Offset X Badge (px)
0px
Offset Y Badge (px)
0px
⭐ Member
▼
Warna Nama
Warna Teks Pesan
Background
Opacity Background (%)
0%
Tampilkan Badge
Ukuran Badge (px)
18px
Offset X Badge (px)
0px
Offset Y Badge (px)
0px
💰 SuperChat
▼
🔒
Fitur SuperChat
Tersedia di paket Basic.
Kustomisasi tampilan SuperChat di stream kamu.
Beli Akses — Rp 100.000
Tampilkan SuperChat
— Header (Nama + Nominal) —
Background Header
Opacity Background Header (%)
100%
Warna Nama User
Warna Nominal (Jumlah SC)
Ukuran Font Nominal (pt)
14pt
— Body (Teks Pesan SC) —
Background Body
Opacity Background Body (%)
100%
Warna Teks Pesan SC
Ukuran Font Pesan SC (pt)
13pt
— Container —
Border Radius (px)
8px
Jarak Bawah (px)
8px
Avatar & Badge
▼
Tampilkan Avatar
Ukuran Avatar (px)
28px
Tampilkan Timestamp
Hiasan Nama & Pesan
▼
🔒
Fitur Hiasan Nama & Pesan
Tersedia di paket Basic.
Tambahkan dekorasi sebelum/sesudah nama dan pesan chat.
Beli Akses — Rp 100.000
Kiri
Nama
Kanan
Nama
Kiri
Pesan
Kanan
Pesan
Aktifkan
Tipe Konten
Gambar
Teks
Warna
Gambar
📁 Upload
atau paste URL:
Teks / Emoji
Warna Block
Lebar (px)
24px
Tinggi (px)
24px
Posisi X (px)
0px
Posisi Y (px)
0px
Opasitas
100%
Aktifkan
Tipe Konten
Gambar
Teks
Warna
Gambar
📁 Upload
atau paste URL:
Teks / Emoji
Warna Block
Lebar (px)
24px
Tinggi (px)
24px
Posisi X (px)
0px
Posisi Y (px)
0px
Opasitas
100%
Aktifkan
Tipe Konten
Gambar
Teks
Warna
Gambar
📁 Upload
atau paste URL:
Teks / Emoji
Warna Block
Lebar (px)
24px
Tinggi (px)
24px
Posisi X (px)
0px
Posisi Y (px)
0px
Opasitas
100%
Aktifkan
Tipe Konten
Gambar
Teks
Warna
Gambar
📁 Upload
atau paste URL:
Teks / Emoji
Warna Block
Lebar (px)
24px
Tinggi (px)
24px
Posisi X (px)
0px
Posisi Y (px)
0px
Opasitas
100%
Sembunyikan Elemen
▼
Sembunyikan Header Chat
Sembunyikan Input Box
Sembunyikan Ticker (SuperChat)
Sembunyikan Banner Chat
Sembunyikan Banner Manager
Sembunyikan Docked Message
Sembunyikan Viewer Engagement
⚠ Notif Belum Login / Restricted
Sembunyikan "Sign in to chat"
Sembunyikan "Messages appear publicly"
Sembunyikan Action Panel
Sembunyikan Mode Change Message
Sembunyikan Reaction Panel
Sembunyikan Moderation Message
▶ Simulasi Live
{ } CSS Output
Import CSS
Reset
Simpan
Copy CSS
Kecepatan spawn:
2.0s
Checkerboard = transparan di OBS
CSS siap paste ke OBS → Browser Source → Custom CSS
Siap
Paste ke OBS: Browser Source → Properties → Custom CSS