Pembuat Variabel CSS Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

🎨

Pembuat Variabel CSS

Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

Tentukan variabel

Tambahkan properti kustom CSS dengan nama dan nilai, atau gunakan tema preset.

Pratinjau tema

Lihat variabel Anda diterapkan pada kartu sampel dengan tombol.

Salin CSS

Salin deklarasi :root dengan semua properti kustom Anda.

Loading tool...

What Is Pembuat Variabel CSS?

Generator Variabel CSS membuat properti kustom (:root variabel) untuk membangun sistem desain yang konsisten dan mudah dipertahankan. Properti kustom CSS (juga disebut variabel CSS) adalah nilai yang dapat digunakan kembali yang didefinisikan dengan awalan -- dan diakses dengan fungsi var(). Alat ini memungkinkan Anda membuat, mengedit, dan mengelola set variabel untuk warna, spasi, tipografi, dan nilai CSS lainnya. Variabel warna termasuk pemilih warna terintegrasi untuk seleksi visual yang mudah. Tema preset (Tema Gelap dan Pastel) menyediakan set variabel siap pakai untuk pola desain umum. Pratinjau langsung menampilkan variabel Anda diterapkan pada komponen kartu sampel sehingga Anda dapat melihat bagaimana nilai-nilai tersebut bekerja bersama. Keluarannya adalah blok deklarasi :root yang rapi dan siap untuk ditempelkan di atas stylesheet Anda.

Why Use Pembuat Variabel CSS?

Pemilih warna visual yang terintegrasi dengan pengeditan variabel
Tema preset untuk memulai cepat
Pratinjau langsung menampilkan variabel yang diterapkan pada komponen sampel
Tambah, edit, dan hapus variabel dengan antarmuka yang intuitif

Common Use Cases

Token Sistem Desain

Buat token desain sebagai variabel CSS untuk tema konsisten.

Peralihan Tema

Tentukan set variabel untuk tema terang dan gelap dengan peralihan mudah.

Kustomisasi Merek

Atur warna merek dan tipografi sebagai variabel CSS yang dapat digunakan kembali.

Pengaturan Gaya Komponen

Buat variabel tingkat komponen untuk komponen yang dapat dikonfigurasi dan digunakan kembali.

Technical Guide

Properti kustom CSS didefinisikan dengan awalan -- dalam lingkup selector (biasanya :root untuk ketersediaan global): :root { --color-primary: #667eea; }. Mereka diakses dengan var(): warna: var(--color-primary). Variabel mengalir dan mewarisi seperti properti CSS lainnya-mendefinisikannya dalam :root membuatnya tersedia di mana-mana. Mereka dapat ditimpa dalam lingkup selector apa pun, memungkinkan tema: .dark-theme { --color-primary: #90cdf4; }. Variabel dapat merujuk variabel lain: --color-hover: var(--color-primary). Untuk tema, definisikan semua variabel di :root dan timpa di kelas tema. JavaScript dapat membaca dan menyetel variabel: document.documentElement.style.setProperty('--color-primary', '#000'). Tidak seperti variabel preprocessor (Sass, Less), properti kustom CSS dinamis dan dapat diubah pada waktu runtime. Mereka didukung di semua browser modern.

Tips & Best Practices

1
Gunakan nama semantik (--color-primary) bukan nama deskriptif (--blue-500)
2
Tentukan semua variabel di :root dan timpa di kelas tema
3
Kelompokkan variabel terkait dengan konvensi penamaan yang konsisten
4
Gunakan var() dengan nilai fallback: var(--color, #000) untuk kekokohan

Related Tools

Pembuat Gradien CSS

Buat gradien linier, radial, dan konik yang indah dengan beberapa pemberhentian warna dan kontrol sudut.

🎨 CSS & Design

Generator Konfigurasi Tailwind

Buat file konfigurasi Tailwind CSS dengan warna, font, dan breakpoint kustom.

🎨 CSS & Design

Generator Skala Tipografi

Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

🎨 CSS & Design

Generator Skala Spasi

Buat sistem skala spasi yang konsisten dengan satuan dasar dan pengali yang dapat disesuaikan.

🎨 CSS & Design

Frequently Asked Questions

Q Apa itu properti kustom CSS?

Properti kustom CSS (variabel) adalah nilai yang dapat digunakan kembali yang didefinisikan dengan awalan --, diakses dengan var(), yang mengalir dan mewarisi seperti CSS lainnya.

Q Apakah saya bisa menggunakan variabel untuk nilai CSS apa pun?

Ya, variabel CSS dapat memegang nilai CSS valid apa pun: warna, ukuran, nama font, bahkan nilai kompleks seperti bayangan.

Q Apakah properti kustom CSS didukung di semua browser?

Ya, properti kustom CSS didukung di semua browser modern. IE11 tidak mendukungnya.

Q Apakah saya bisa mengubah variabel CSS dengan JavaScript?

Ya, gunakan element.style.setProperty('--var-name', 'value') untuk mengubah variabel secara dinamis.

Q Bagaimana variabel CSS berbeda dari variabel Sass?

Variabel CSS adalah dinamis dan dapat diubah pada saat runtime. Variabel Sass dikompilasi pada waktu build dan tidak dapat diubah di browser.

About This Tool

Pembuat Variabel CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.