Generator Gradien CSS
Buat kode gradien CSS dengan memilih warna dan sudut, sambil melihat pratinjau secara langsung
Fitur
Pratinjau dan kode diperbarui secara bersamaan
Tampilan dan CSS berubah setiap kali mengubah warna atau sudut
Mendukung linier, radial, dan conic
Tentukan secara detail sudut, bentuk, dan posisi pusat untuk setiap jenis
Sesuaikan hingga 10 warna dengan seret
Sesuaikan posisi warna dengan seret di bilah, transparansi dengan slider
8 sampel dan pembuatan acak
Mulai dari palet standar atau acak, kemudian lakukan penyesuaian halus
Cara Penggunaan
Pilih jenis
Pilih jenis gradien dari linier, radial, atau conic
Tentukan warna
Pilih warna dengan kode warna atau sampel, tambah warna dengan "Tambah warna", sesuaikan posisi dan transparansi
Sesuaikan orientasi
Untuk linier, tentukan sudut atau tombol arah; untuk radial dan conic, tentukan posisi pusat
Salin kode
Salin CSS satu baris dengan tombol "Salin" dan tempel ke gaya Anda
Kasus Penggunaan
Membuat latar belakang gambar hero
Tentukan warna latar tombol atau bagian atas situs tanpa menulis kode
Memilih palet untuk judul blog
Pilih palet serupa dari sampel untuk menata latar belakang judul artikel
Overlay yang diterapkan ke foto
Buat lapisan semi-transparan di atas foto dengan warna transparansi rendah
Menyesuaikan gradien multiwarna
Seret perlahan untuk menyesuaikan posisi perbatasan 3 warna atau lebih
Pengetahuan Dasar
Perbedaan linear, radial, dan conic
Gradien CSS memiliki 3 fungsi dengan cara perubahan warna yang berbeda, semuanya ditulis di properti background.
- linear-gradient：linear-gradient adalah gradien linier tempat warna berubah sepanjang garis lurus dengan sudut yang ditentukan.
- radial-gradient：radial-gradient adalah gradien radial tempat warna menyebar dalam bentuk lingkaran atau elips dari posisi pusat ke arah luar.
- conic-gradient：conic-gradient adalah gradien conic tempat warna berubah searah jarum jam mengelilingi posisi pusat.
Korespondensi sudut dan kata kunci arah
Sudut linear-gradient dimulai dengan 0deg menunjuk ke atas, dan semakin besar nilai semakin berputar searah jarum jam. Sudut juga dapat ditulis dengan kata kunci arah seperti "to right", 90deg sama dengan "to right", dan 180deg sama dengan "to bottom".
Cara menulis warna henti dan transparansi
Titik henti warna (color stop) adalah posisi tempat warna menjadi titik tertentu dalam gradien, 0% adalah titik awal dan 100% adalah titik akhir. Misalnya, "#3B82F6 0%, #8B5CF6 100%" menentukan perubahan warna dari biru di awal ke ungu di akhir.
- Format #RRGGBB：Format #RRGGBB adalah cara menulis warna dengan merepresentasikan intensitas merah, hijau, dan biru dengan 2 digit heksadesimal masing-masing, #FF0000 mewakili merah buram.
- Format rgba：Format rgba adalah cara menulis warna dengan menambahkan transparansi (0–1) ke nilai merah, hijau, biru (0–255), transparansi 0,5 mewakili warna setengah transparan.
Keamanan dan Privasi
Diproses di peramban
Data yang Anda masukkan hanya diproses di dalam peramban Anda dan tidak dikirim ke luar.
Diproses hanya di dalam browser
Pembuatan kode gradien dilakukan sepenuhnya di dalam browser Anda, dan data input tidak dikirim ke server.
Komunikasi dienkripsi dengan HTTPS
Pemuatan halaman juga dienkripsi dengan TLS, sehingga konten tidak dapat dibaca oleh pihak ketiga.
Tidak ada pengiriman ke pihak ketiga
Konten input tidak dikirim ke layanan eksternal seperti jaringan iklan atau pelacak.
Tidak ada penyimpanan hasil otomatis
Warna dan pengaturan pilihan dan saran input tidak disimpan di server.
Ikuti RAKKOTOOLS di Penelusuran Google
184 alat praktis yang mudah ditemukan dari Penelusuran Google dan pencarian AI!
- Ditemukan di penelusuran
- Juga ditampilkan di pencarian AI
- Temukan alat baru
Informasi pembaruan
- update #312
Menambahkan pembuat gradien CSS, pilih warna dan sudut untuk menghasilkan kode