Langkau ke kandungan utama
LibraTool logoLibraTool

Penjana Kecerunan CSS percuma

Cipta kecerunan CSS linear, jejari, dan konik dengan pratonton langsung. Salin CSS dalam satu klik.

Berfungsi luar talian selepas dimuatkan
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Mengelakkan titik tengah kelabu antara warna yang sangat berbeza. Menambah baris sRGB biasa sebagai sandaran untuk pelayar lama.

0%
100%

Pratetapan

Kegunaan biasa

  • Buat Kecerunan untuk Bahagian WiraReka latar belakang kecerunan sepanjang halaman untuk bahagian wira laman web dan halaman pendaratan.
  • Buat Butang dan CTA KecerunanReka latar belakang butang kecerunan yang menarik perhatian untuk panggilan tindakan yang menonjol.
  • Buat Latar Belakang Kecerunan untuk KadReka pengisian kecerunan untuk kad, tetingkap modal, panel tepi dan latar belakang komponen UI.
  • Buat Kecerunan untuk Grafik Media SosialReka latar belakang kecerunan yang berwarna-warni untuk catatan Instagram, imej kecil YouTube dan kad Twitter.
  • Buat Skala Warna untuk CartaJana skala warna kecerunan untuk peta haba, bar kemajuan dan visualisasi data.

Cara ia berfungsi

Penjana kecerunan membina rentetan kecerunan CSS terus dalam pelayar — tiada pustaka, tiada pelayan, tiada muat naik. Fungsi tulisan tangan membina sintaks linear-gradient, radial-gradient, atau conic-gradient yang betul daripada perhentian warna dan sudut anda secara masa nyata, kemudian memformat hasilnya untuk sasaran output yang anda pilih.

  1. 1
    Konfigurasi perhentian dan arah
    Anda tetapkan antara 2 dan 6 perhentian warna menggunakan pemilih warna asli pelayar, kemudian posisikan setiap perhentian sepanjang paksi 0–100% dengan penggelangsar julat. Untuk kecerunan linear dan konik anda juga pilih sudut (0–360°); untuk kecerunan jejarian anda pilih bentuk (bujur atau bulatan) dan kata kunci saiz yang mengawal sejauh mana kecerunan meluas.
  2. 2
    buildCss membina rentetan kecerunan
    Pada setiap perubahan, fungsi buildCss tempatan menggabungkan parameter anda ke dalam panggilan fungsi CSS yang betul — cth. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Tiada pustaka terlibat; rentetan dibina dengan logik templat JavaScript biasa dan digabungkan terus daripada tatasusunan perhentian.
  3. 3
    Pratonton langsung dipaparkan melalui gaya sebaris
    Rentetan kecerunan yang dibina dikenakan terus pada elemen div sebagai gaya latar belakang sebaris, jadi enjin CSS pelayar sendiri memaparkan pratonton. Tiada kanvas atau imej terlibat — apa yang anda lihat secara literal ialah sifat CSS yang dikenakan.
  4. 4
    Output sedia-salin dalam empat format
    Pemilih format menukar rentetan kecerunan yang sama kepada CSS biasa (background: ...), blok CSS-dengan-sandaran-pejal, kelas nilai-sembarang Tailwind, atau pengisytiharan pembolehubah SCSS. Mengklik Salin menulis output yang dipilih ke papan keratan melalui navigator.clipboard.writeText. Kecerunan semasa juga dikod ke dalam hash URL supaya anda boleh tandabuku atau kongsinya.

Alat berkaitan

🟦

Penjana Petak CSS

Reka bentuk petak CSS secara visual — trek, unit dan jurang — dan salin CSS dan HTML yang dijana.

Cuba
↔️

Penjana Flexbox CSS

Eksperimen dengan arah flex, bungkus, justifikasi dan selaras pada item langsung — dan salin CSS.

Cuba
🧮

Kalkulator Matriks

Tambah, tolak, darab, transposisi, songsangkan dan turunkan matriks, serta penentu, pangkat, nilai eigen dan selesaikan Ax = b — sehingga 8×8, dengan salin satu ketikan. Percuma dan peribadi.

Cuba

Soalan lazim