Pengembang / CSS
Generator Gradasi CSS
Rancang gradasi linear, radial, atau conic dengan pratinjau langsung, color stop sebanyak yang Anda perlukan, dan preset, lalu salin CSS-nya.
Generator Gradasi CSS: Generator ini menulis deklarasi background yang diperlukan browser untuk gradasi yang Anda lihat: linear-gradient dengan sudut, radial-gradient berbentuk lingkaran atau elips dari tengah, atau conic-gradient yang menyapu mengelilingi titik tengah dari sudut awal. Masing-masing menyertakan color stop dalam urutan yang benar. Warna solid ditempatkan terlebih dahulu sebagai fallback untuk browser yang terlalu lama untuk menggambar gradasi. Warna baru ditambahkan pada celah terlebar dan merupakan campuran dari warna di sebelahnya, sehingga gradasi tidak berubah secara mendadak. Berjalan 100% lokal di browser Anda tanpa upload file ke server.
- Kategori
- Tools developer
- Dijalankan
- Di browser Anda
- Biaya
- Gratis · tanpa daftar
- Ketersediaan
- Siap digunakan
Berjalan sepenuhnya di browser Anda
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Baris pertama adalah warna solid untuk browser yang sangat lama; semua browser saat ini menggunakan gradien pada baris kedua.
Preset
Gradien yang tampak halus
Perpaduan antara dua warna yang sangat berbeda, seperti biru ke kuning, akan melewati abu-abu kusam di tengahnya. Menambahkan stop di antaranya dengan warna yang lebih cerah membuatnya tetap hidup. Gradien antara warna yang berdekatan, seperti oranye ke merah muda, biasanya tidak memerlukan bantuan.
Pilih atau periksa warna dengan konverter warna, lalu tambahkan kedalaman pada kartu dengan generator bayangan kotak.
Teks pada gradien
Pastikan teks tetap mudah dibaca di kedua ujung gradien, bukan hanya di tengah. Gradien yang lebih gelap dengan teks putih, atau gradien halus di belakang teks gelap, lebih aman daripada pelangi yang cerah.
Cara menggunakannya
- Pilih preset atau pilih linear, radial, atau conic.
- Atur sudut, lalu sesuaikan warna dan posisinya; tambahkan warna untuk membuat lebih banyak color stop.
- Salin CSS ke stylesheet Anda.
Privasi & batasan
Semuanya berjalan di browser Anda; gradasi terakhir hanya disimpan di browser ini.
Alat terkait
Pertanyaan umum
Apa arti sudut pada gradasi linear?
0deg bergerak dari bawah ke atas, 90deg dari kiri ke kanan, 180deg dari atas ke bawah, dan 270deg dari kanan ke kiri. Gradasi digambar mengikuti arah tersebut, jadi 135deg bergerak dari sudut kiri atas ke sudut kanan bawah.
Apa itu color stop?
Color stop adalah warna dan posisi, dari 0% hingga 100% sepanjang gradasi, tempat warna tersebut tercapai sepenuhnya. Di antara dua stop, warna akan menyatu; menempatkan dua stop pada posisi yang sama akan menghasilkan tepi tegas, bukan perpaduan, yang digunakan untuk membuat garis-garis.
Apa perbedaan gradasi conic dan radial?
Gradasi radial mengubah warna ke arah luar dari titik tengah, dalam bentuk cincin. Gradasi conic mengubah warna mengelilingi titik tengah, seperti jarum jam, sehingga berguna untuk roda warna dan diagram lingkaran.
Apakah saya masih memerlukan prefiks -webkit-?
Tidak. Semua browser saat ini mendukung linear-gradient dan radial-gradient tanpa prefiks, dan conic-gradient telah berfungsi di semuanya sejak 2021. Warna fallback pada baris pertama hanya diperlukan untuk browser yang jauh lebih lama.
Alat gratis · berjalan di browser anda · tanpa perlu akun