Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Gradien CSS

CSS Gradient Generator

Susun gradien linear atau radial dengan arah, dua warna, dan titik henti eksplisit, lalu salin satu deklarasi background yang siap ditempel ke stylesheet.

Jalur tugas / dari masukan ke hasil

Pilih jenis gradien

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Gradien CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara menyusun gradien CSS

  1. 01

    Pilih jenis gradien

    Buka Jenis gradien dan pilih Linear untuk campuran lurus atau Radial untuk yang melingkar. Lencana pratinjau menampilkan sudut saat ini saat Anda bekerja.

  2. 02

    Atur arah atau fokus

    Arah / fokus berjalan dari 0 hingga 360. Untuk gradien linear itu adalah sudut dalam derajat; untuk yang radial, ia menempatkan titik fokus pada cincin yang mengelilingi pusat. Lencana melacak nilainya secara langsung, yang memudahkan menilai koreksi kecil.

  3. 03

    Pilih warna dan titik henti

    Atur Warna awal dan Warna akhir, lalu posisikan Titik henti awal (0–99%) dan Titik henti akhir (1–100%). Awal harus mendahului akhir, atau status berubah menjadi PERIKSA NILAI.

  4. 04

    Kendalikan pita campuran

    Jarak di antara kedua titik henti adalah zona transisi: titik yang berjarak 1% menghasilkan tepi nyaris keras untuk garis dua warna, sedangkan titik pada 0% dan 100% — bawaannya — memberi campuran selembut mungkin selebar penuh. Perhatikan pratinjau, bukan angkanya.

  5. 05

    Salin deklarasinya

    Tekan Salin CSS atau Unduh .css untuk menyimpan toolars-gradient.css. Aturan .gradient adalah satu deklarasi background — linear-gradient(…deg, …) atau radial-gradient(circle at …, …) — yang persis sesuai titik henti Anda.

  6. 06

    Terapkan dan perluas

    Deklarasi tunggal ini berpadu rapi dengan tambahan background-size atau background-repeat Anda sendiri. Butuh warna ketiga? Salin aturannya dan sisipkan titik tengah secara manual — dua titik yang Anda setel mengangkur kedua ujung campuran. Karena hanya satu baris, ia juga rapi ditempel ke custom property jika sistem desain Anda menyimpan token seperti itu.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Gradien CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Gradien CSS

Pita hero yang memudar dari biru merek ke teal, kilau radial lembut di balik foto produk, garis dua warna berhenti keras pada tabel harga — gradien menopang lebih banyak antarmuka daripada aset gambar mana pun. Mode radial membuktikan gunanya untuk kilau dan vignette yang tidak bisa dipalsukan campuran linear. Menyusun satu secara visual, dengan titik henti eksplisit alih-alih tebakan, hanya butuh beberapa detik, dan karena generator berjalan di tab ini, eksperimen palet tetap privat sampai desain dirilis. Deklarasi yang disalin tidak perlu dirapikan sebelum masuk ke stylesheet.

Pertanyaan umum

Mengapa pratinjau menampilkan PERIKSA NILAI?
Hanya satu aturan: titik henti awal harus berada sebelum titik henti akhir. Titik yang sama atau terbalik membuat gradien ambigu, jadi pesannya menyebutkan aturan itu dan salin serta unduh menunggu sampai lolos. Menjaga jarak bahkan 1% di antara titik sudah cukup.
Apa yang dilakukan Arah / fokus dalam mode radial?
Pada gradien radial, sudut tidak memutar apa pun — ia memposisikan fokus lingkaran pada cincin 25% dari pusat, jadi 0° mendorong fokus ke kanan dan 180° ke kiri. Koordinat circle at X% Y% yang diekspor mencerminkan itu dengan persis.
Sudut berapa yang memberi arah yang saya inginkan?
Sudut linear mengikuti konvensi CSS: 0deg mencampur ke atas, 90deg menunjuk ke kanan, 180deg ke bawah, dan 270deg ke kiri. Bawaan 135deg berjalan dari kiri atas ke kanan bawah, diagonal yang cocok untuk kebanyakan pita hero.
Bagaimana membuat garis berhenti keras?
Validasi mengharuskan titik henti awal berada sebelum titik henti akhir, jadi letakkan keduanya berjarak 1% — 49% dan 50% untuk sambungan di tengah. Pita transisi menyusut menjadi sehelai garis, yang terbaca sebagai belahan dua warna yang tajam pada elemen mana pun.
Bisakah saya membuat gradien tiga warna?
Generator sengaja bekerja dengan dua titik henti eksplisit — itulah yang dicakup kontrol dan validasinya. Setelah menyalin deklarasi, menambahkan titik tengah secara manual adalah edit satu baris.
Apakah warna saya diunggah ke mana pun?
Tidak. Semuanya dihitung di tab browser saat ini tanpa akun, dan tidak ada nilai yang masuk ke penyimpanan, log, atau analitik. Tekan Atur ulang untuk kembali ke campuran linear bawaan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat