Generator Gradien CSS
Buat gradien CSS menakjubkan secara visual. Hasilkan gradien linear, radial dan konikal dengan beberapa color stop, sudut dan posisi kustom. Salin kode CSS siap produksi secara instan.
Apa itu gradien CSS?
Gradien CSS adalah nilai gambar CSS yang menampilkan transisi halus antara dua warna atau lebih tanpa menggunakan file gambar. Gradien dirender oleh browser, membuatnya independen dari resolusi dan berkinerja tinggi.
Jenis gradien CSS apa yang didukung?
Generator ini mendukung tiga jenis: linear-gradient (warna sepanjang garis lurus), radial-gradient (warna memancar dari pusat), dan conic-gradient (warna berputar di sekitar titik pusat seperti wajah jam).
Apa perbedaan gradien linear dan radial?
Gradien linear mentransisikan warna sepanjang garis lurus yang ditentukan oleh sudut atau kata kunci arah. Gradien radial mentransisikan warna ke luar dari titik pusat dalam bentuk melingkar atau elips.
Berapa banyak color stop yang bisa digunakan?
Anda bisa menggunakan sebanyak mungkin color stop sesuai kebutuhan. Setiap stop mendefinisikan warna dan opsional posisi (0% hingga 100%) sepanjang garis gradien. Beberapa stop menciptakan transisi multi-warna yang kompleks.
Bagaimana menggunakan kode CSS yang dihasilkan?
Salin kode CSS yang dihasilkan dan tempelkan sebagai nilai properti background atau background-image di stylesheet CSS Anda. Kode berfungsi di semua browser modern.
Apa itu color stop dalam gradien?
Color stop mendefinisikan warna spesifik pada posisi tertentu sepanjang garis gradien. Misalnya "red 0%, blue 50%, green 100%" menciptakan gradien yang dimulai merah, bertransisi ke biru di tengah, dan berakhir hijau.
Bisakah membuat gradien bersudut?
Ya, gradien linear mendukung nilai sudut dari 0deg hingga 360deg. Anda juga bisa menggunakan kata kunci arah seperti "to right", "to bottom", "to top left" untuk sudut umum.
Apakah gradien CSS responsif?
Ya, gradien CSS secara inheren responsif karena berbasis vektor dan dirender oleh browser. Mereka menskalakan sempurna ke ukuran kontainer apa pun tanpa kehilangan kualitas atau meningkatkan ukuran file.
Apakah gradien CSS memengaruhi kinerja halaman?
Gradien CSS umumnya sangat berkinerja. Mereka menghilangkan permintaan HTTP untuk file gambar dan diakselerasi perangkat keras. Namun, gradien sangat kompleks dengan banyak stop dapat memengaruhi rendering pada perangkat kelas bawah.
Bisakah menggunakan gradien untuk latar belakang dan border?
Ya, gradien bisa digunakan untuk background-image, border-image, mask-image, dan properti apa pun yang menerima nilai gambar CSS. Mereka berfungsi di mana pun nilai gambar diharapkan.
Browser apa yang mendukung gradien CSS?
Semua browser modern mendukung gradien CSS termasuk Chrome, Firefox, Safari, Edge, dan Opera. Dukungan sangat baik sejak IE10. Prefiks vendor tidak lagi diperlukan.
Bagaimana membuat gradien berulang?
Gunakan repeating-linear-gradient atau repeating-radial-gradient alih-alih versi standar. Ini mengulangi pola gradien untuk mengisi seluruh elemen, menciptakan efek bergaris atau berpola.
Bisakah menganimasikan gradien CSS?
Gradien CSS tidak dapat dianimasikan langsung dengan transisi CSS. Namun, Anda bisa menganimasikan background-position, background-size, atau menggunakan properti CSS kustom dengan @property untuk efek animasi gradien.
Apakah generator gradien ini gratis?
Ya, generator gradien CSS ini sepenuhnya gratis. Tidak perlu registrasi, tidak ada batas penggunaan, dan semua kode yang dihasilkan adalah milik Anda untuk digunakan dalam proyek apa pun.