Pembuat Gradien CSS
Buat deklarasi CSS linear-gradient, radial-gradient, atau conic-gradient dari serangkaian color stop — salin CSS siap pakai ke stylesheet Anda.
Input
Arah untuk gradien linear, sudut awal untuk gradien conic.
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "90",
"color1": "#ff0000",
"position1": "0",
"color2": "#0000ff",
"position2": "100",
"useColor3": "",
"color3": "#ff6b6b",
"position3": "50"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-gradient-generator` tool (CSS Gradient Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-gradient-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Gradien CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukannya
Pembuat Gradien CSS mengubah jenis gradien, sudut, dan serangkaian color stop menjadi deklarasi CSS background yang siap ditempel. Pilih linear, radial, atau conic, tentukan hingga tiga warna dengan persentase posisi masing-masing, dan CSS yang dihasilkan akan diperbarui secara instan saat Anda menyesuaikan kontrol.
Gradien linear vs. radial vs. conic
Gradien linear — warna bertransisi sepanjang garis lurus pada sudut pilihan.
0degmenunjuk ke atas,90degmenunjuk ke kanan,180degmenunjuk ke bawah, dan seterusnya mengelilingi lingkaran. Ini adalah jenis gradien paling umum, digunakan untuk latar belakang, tombol, dan overlay.background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);Gradien radial — warna memancar keluar dari titik pusat alih-alih sepanjang garis, menghasilkan perpaduan melingkar atau elips. Tidak ada sudut yang perlu diatur; default browser (ellipse yang berukuran ke sudut terjauh, berpusat pada elemen) mencakup sebagian besar kasus penggunaan.
background: radial-gradient(#464aff 0%, #00d4ff 100%);Gradien conic — warna menyapu mengelilingi titik pusat seperti roda warna atau bagan pai, bukan mencampur sepanjang garis atau memancar keluar. Sudut mengatur tempat sapuan dimulai.
background: conic-gradient(from 45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
Color stop dan posisi
Setiap color stop memasangkan warna dengan persentase posisi (0-100%) sepanjang gradien. Posisi 0% adalah tempat gradien dimulai dan 100% adalah tempat berakhir; stop di antara mengontrol tempat setiap warna mencapai kekuatan penuh. Alat ini mendukung dua color stop yang diperlukan plus yang ketiga opsional — cukup untuk membangun sebagian besar gradien dua dan tiga warna yang digunakan dalam desain nyata. Stop secara otomatis diurutkan berdasarkan posisi, jadi tidak peduli urutan apa yang Anda masukkan.
Cara menggunakannya
- Pilih Jenis Gradien: Linear, Radial, atau Conic.
- Untuk gradien Linear dan Conic, atur Sudut — arah perpaduan untuk linear, atau titik awal sapuan untuk conic.
- Pilih Warna 1 dan Warna 2 beserta posisinya — ini menentukan awal dan akhir gradien.
- Nyalakan Tambahkan color stop ketiga jika Anda ingin warna tengah, dan atur warna dan posisinya.
- Salin deklarasi
backgroundyang dihasilkan dari output kode dan tempel ke stylesheet Anda.
Pertanyaan Umum
Mengapa gradien radial tidak memiliki opsi bentuk atau posisi?
Default browser — ellipse yang berukuran ke sudut terjauh, berpusat pada elemen — sudah cocok dengan cara sebagian besar gradien radial digunakan. Jika Anda membutuhkan lingkaran alih-alih ellipse, atau gradien off-center, tambahkan kata kunci circle atau klausa at <position> ke CSS yang dihasilkan secara manual.
Bisakah saya menggunakan lebih dari tiga color stop?
Alat ini dibatasi pada tiga untuk menjaga antarmuka tetap sederhana. Untuk gradien dengan lebih banyak stop, ambil CSS yang dihasilkan dan perluas daftar yang dipisahkan koma dari pasangan <color> <position>% secara manual — sintaksnya sama terlepas dari berapa banyak stop yang Anda tambahkan.
Apa arti sudut untuk gradien conic?
Ini adalah sudut (dalam derajat) di mana sapuan warna dimulai, diukur searah jarum jam dari bagian atas. 0deg memulai sapuan pada jam 12; 90deg memulainya pada jam 3.
Apakah alat ini menyimpan atau mengunggah apa pun? Tidak. Semua perhitungan berjalan secara lokal di browser Anda — nilai warna dan posisi Anda tidak pernah meninggalkan perangkat Anda.