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.
Cara Menggunakan Generator Gradien CSS
Buat gradien CSS secara visual dan salin kode siap produksi dalam sekejap. Perenderan terjadi lokal di browser Anda tanpa unggahan apa pun.
- Pilih Type gradien: linear-gradient atau radial-gradient.
- Atur Angle untuk gradien linear, atau pilih Shape seperti circle atau ellipse untuk gradien radial.
- Tambahkan, ubah warna, dan geser titik warna di bagian Color Stops.
- Klik salah satu swatch di bawah Presets untuk memulai dari campuran siap pakai.
- Salin CSS yang dihasilkan dan tempel ke stylesheet Anda.
Letakkan dua titik warna berbeda pada posisi yang sama untuk menciptakan tepi tegas — cara cepat membuat pola garis tanpa gambar.
Alat Terkait
- Generator Box Shadow CSS Generator box-shadow CSS online gratis. Buat bayangan indah secara visual dengan offset, blur, spread, warna, dan inset yang dapat disesuaikan. Pratinjau langsung dan salin kode instan.
- Generator Border Radius CSS Generator border-radius CSS visual. Sesuaikan setiap sudut secara independen dengan pratinjau real-time dan salin kode CSS secara instan.
- Generator CSS Grid Generator CSS Grid visual gratis dengan pratinjau langsung. Desain tata letak grid responsif secara interaktif dan ekspor kode CSS siap produksi.
- Generator CSS Flexbox Generator CSS Flexbox visual dengan pratinjau langsung. Sesuaikan properti flex dan dapatkan kode CSS siap pakai.
- Generator Border Radius Kreatif Generator border radius kreatif gratis online. Seret 8 pegangan atau pilih prasetel blob untuk membuat bentuk CSS organik dan menyalin kodenya seketika.
- Konverter Warna Konverter warna online gratis. Konversi format HEX, RGB, HSL, HSV secara instan dengan pemilih visual. 100% pribadi, berjalan di browser Anda.
- Generator Easing CSS Generator easing CSS online gratis. Geser titik kendali cubic-bezier pada kurva interaktif, pilih dari 18 preset, lihat pratinjau bola berulang, dan salin fungsi timing seketika.
- Generator Text Shadow CSS Generator text-shadow CSS online gratis. Tumpuk beberapa lapisan bayangan dengan offset, blur, warna, dan opasitas, coba preset Neon, 3D, Retro, dan salin CSS-nya seketika.