Penjana Kecerunan CSS

Penjana kecerunan CSS ini membina kecerunan linear dan jejari daripada hentian warna yang anda kawal, dengan pratonton langsung dan perisytiharan latar belakang yang sedia ditampal. Seret hentian pada bar, tetapkan sudut atau bentuk, dan CSS dikemas kini serta-merta.

Semuanya berjalan dalam pelayar anda daripada warna dan tetapan yang anda pilih, jadi tiada apa-apa yang dimuat naik dan anda boleh menyalin hasilnya dan menggunakannya di luar talian.

Kecerunan linear menggabungkan warna sepanjang garis lurus, dan sudut menentukan arahnya: 0 darjah menghala ke atas, 90 darjah ke kanan dan 180 darjah ke bawah. Kecerunan jejari berkembang keluar dari pusat sebagai bulatan atau elips.

Kedua-duanya ialah nilai CSS standard, ditulis sebagai linear-gradient() dan radial-gradient(), dan kedua-duanya menggunakan senarai hentian warna yang sama, jadi menukar jenis mengekalkan warna anda dan hanya mengubah cara ia merebak.

Setiap hentian warna adalah warna yang diletakkan pada kedudukan dari 0% hingga 100 %. Kecerunan bercantum dengan lancar antara hentian bersebelahan, jadi kedudukan hentian mengawal tempat warnanya memuncak dan seberapa cepat ia memudar ke hentian seterusnya.

Tambah seberapa banyak hentian yang anda perlukan untuk membina kecerunan berbilang warna, seretnya untuk memperhalusi adunan atau klik bar untuk melepaskan hentian baharu di tempat yang anda inginkan. Dua hentian adalah minimum yang diperlukan oleh kecerunan.

Salin kod yang dijana dan tampalkannya sebagai latar belakang mana-mana elemen, seperti bahagian, kad atau butang. Pelayar moden menyokong kecerunan linear dan kecerunan jejari tanpa awalan vendor, jadi nilai berfungsi sebagaimana adanya.

Oleh kerana kecerunan hanyalah nilai, anda juga boleh menggunakannya di mana-mana imej latar belakang dijangka, melapisinya pada warna pepejal sebagai sandaran, atau menggunakan semula hentian yang sama merentasi versi linear dan jejari untuk rupa yang konsisten.