Penjana Gradien CSS
Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
Apakah gradien CSS?
Gradien CSS ialah nilai imej CSS yang memaparkan peralihan lancar antara dua warna atau lebih tanpa menggunakan fail imej. Gradien diberikan oleh pelayar, menjadikannya bebas resolusi dan berprestasi tinggi.
Jenis gradien CSS apakah yang disokong?
Penjana ini menyokong tiga jenis: linear-gradient (warna sepanjang garis lurus), radial-gradient (warna memancar dari pusat), dan conic-gradient (warna berputar di sekitar pusat seperti muka jam).
Apakah perbezaan gradien linear dan radial?
Gradien linear meralihkan warna sepanjang garis lurus ditakrifkan oleh sudut atau kata kunci arah. Gradien radial meralihkan warna ke luar dari pusat dalam bentuk bulatan atau elips.
Berapa banyak henti warna boleh digunakan?
Anda boleh menggunakan sebanyak mana henti warna yang diperlukan. Setiap henti mentakrifkan warna dan pilihan kedudukan (0% hingga 100%) sepanjang garis gradien. Berbilang henti mencipta peralihan pelbagai warna yang kompleks.
Bagaimana menggunakan kod CSS yang dijana?
Salin kod CSS yang dijana dan tampal sebagai nilai sifat background atau background-image dalam helaian gaya CSS anda. Kod berfungsi dalam semua pelayar moden.
Apakah henti warna dalam gradien?
Henti warna mentakrifkan warna khusus pada kedudukan tertentu sepanjang garis gradien. Contohnya "red 0%, blue 50%, green 100%" mencipta gradien bermula merah, bertukar biru di tengah dan berakhir hijau.
Bolehkah mencipta gradien bersudut?
Ya, gradien linear menyokong nilai sudut dari 0deg hingga 360deg. Anda juga boleh menggunakan kata kunci arah seperti "to right", "to bottom", "to top left".
Adakah gradien CSS responsif?
Ya, gradien CSS secara semulajadi responsif kerana berasaskan vektor dan diberikan oleh pelayar. Ia berskala sempurna kepada sebarang saiz bekas tanpa kehilangan kualiti atau peningkatan saiz fail.
Adakah gradien CSS mempengaruhi prestasi halaman?
Gradien CSS umumnya sangat berprestasi. Ia menghapuskan permintaan HTTP untuk fail imej dan dipercepat perkakasan. Namun, gradien sangat kompleks dengan banyak henti boleh memberi kesan rendering pada peranti kelas rendah.
Bolehkah menggunakan gradien untuk latar belakang dan sempadan?
Ya, gradien boleh digunakan untuk background-image, border-image, mask-image dan sebarang sifat yang menerima nilai imej CSS.
Pelayar apakah yang menyokong gradien CSS?
Semua pelayar moden menyokong gradien CSS termasuk Chrome, Firefox, Safari, Edge dan Opera. Sokongan cemerlang sejak IE10. Awalan vendor tidak lagi diperlukan.
Bagaimana mencipta gradien berulang?
Gunakan repeating-linear-gradient atau repeating-radial-gradient dan bukannya versi standard. Ini mengulangi corak gradien untuk mengisi seluruh elemen, mencipta kesan berjalur atau bercorak.
Bolehkah menganimasikan gradien CSS?
Gradien CSS tidak boleh dianimasikan secara langsung dengan peralihan CSS. Namun, anda boleh menganimasikan background-position, background-size atau menggunakan sifat CSS tersuai dengan @property.
Adakah penjana gradien ini percuma?
Ya, penjana gradien CSS ini sepenuhnya percuma. Tiada pendaftaran diperlukan, tiada had penggunaan dan semua kod yang dijana ialah milik anda untuk digunakan dalam mana-mana projek.
Cara Menggunakan Penjana Gradien CSS
Cipta gradien CSS secara visual dan salin kod sedia produksi dalam sekelip mata. Pemprosesan berlaku setempat dalam pelayar anda tanpa sebarang muat naik.
- Pilih Type gradien: linear-gradient atau radial-gradient.
- Tetapkan Angle untuk gradien linear, atau pilih Shape seperti circle atau ellipse untuk gradien radial.
- Tambah, tukar warna dan seret hentian warna dalam bahagian Color Stops.
- Klik mana-mana swatch di bawah Presets untuk bermula dengan adunan sedia ada.
- Salin CSS yang dijana dan tampalkan ke dalam lembaran gaya anda.
Letakkan dua hentian warna berbeza pada kedudukan yang sama untuk mendapatkan tepi tegas — cara pantas membuat jalur tanpa imej.
Alat Berkaitan
- Penjana Box Shadow CSS Penjana box-shadow CSS dalam talian percuma. Cipta bayangan cantik secara visual dengan ofset, kabur, sebar, warna dan sisip boleh laras. Pratonton langsung dan salin kod serta-merta.
- Penjana Border Radius CSS Penjana border-radius CSS visual. Laraskan setiap sudut secara bebas dengan pratonton masa nyata dan salin kod CSS serta-merta.
- Penjana CSS Grid Penjana CSS Grid visual percuma dengan pratonton langsung. Reka susun atur grid responsif secara interaktif dan eksport kod CSS sedia produksi.
- Penjana CSS Flexbox Penjana CSS Flexbox visual dengan pratonton langsung. Laraskan sifat flex dan dapatkan kod CSS sedia guna.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.