Preview

CSS yang dijana

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Kawalan kecerunan

135°
0%
100%

Pratetap Popular

Contoh kecerunan

Terokai contoh kecerunan yang menakjubkan ini dan dapatkan inspirasi untuk projek anda yang seterusnya. Klik pada mana-mana kecerunan untuk memuatkannya ke dalam penjana.

Pemerah Pipi Matahari Terbenam

Kecerunan hangat yang diilhamkan oleh matahari terbenam yang indah.

Angin Lautan

Kecerunan yang tenang membangkitkan perasaan perairan pantai.

Gabungan Pudina

Kecerunan segar dan moden yang menggabungkan pudina dan biru langit.

Taman yang Subur

Kecerunan bertenaga yang mewakili keindahan alam semula jadi.

Impian Kosmik

Kecerunan ajaib yang diilhamkan oleh langit malam.

Jam Emas

Kecerunan hangat menangkap intipati senja.

Dokumentasi kecerunan

Apakah kecerunan CSS?

Kecerunan CSS membolehkan anda memaparkan peralihan lancar antara dua atau lebih warna. Ia boleh digunakan sebagai latar belakang untuk elemen dan datang dalam tiga jenis berbeza:

  • Kecerunan Linear:Peralihan warna di sepanjang garis lurus.
  • Kecerunan Jejari:Peralihan warna dari titik tengah ke luar.
  • Kecerunan Konik:Peralihan warna di sekeliling titik tengah dalam bulatan.

Cara Menggunakan Kecerunan

Sebaik sahaja anda telah menjana kecerunan menggunakan alat kami, anda boleh menggunakan kod CSS dalam projek anda:

  1. Salin kod CSS daripada penjana.
  2. Tampal ke dalam fail CSS anda, atau gunakannya sebaris dalam elemen HTML anda.
  3. Sapukan kecerunan pada mana-mana elemen menggunakanbackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Gunakan lebih daripada dua warna untuk kesan kecerunan yang lebih kompleks.
  • Laraskan kedudukan warna untuk mengawal tempat peralihan berlaku.
  • Gabungkan berbilang kecerunan untuk kesan yang lebih kreatif.
  • Untuk kecerunan kon, menukar pusat mewujudkan corak yang menarik.
  • Simpan kecerunan kegemaran anda untuk kegunaan kemudian.

Sokongan Penyemak Imbas

Kecerunan CSS disokong secara meluas dalam penyemak imbas moden. Walau bagaimanapun, penyemak imbas lama seperti Internet Explorer mungkin tidak memaparkannya dengan betul. Sentiasa berikan warna sandaran:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Mengenai Alat Ini

Penjana Kecerunan CSS kami direka untuk membantu pembangun dan pereka bentuk mencipta kecerunan yang cantik dengan mudah. Sama ada anda sedang mengusahakan tapak web, aplikasi atau hanya ingin bereksperimen dengan warna, alat ini memudahkan untuk menjana kecerunan yang sempurna untuk projek anda.

Features

Mudah Digunakan

Antara muka intuitif untuk mencipta kecerunan.

Reka Bentuk Responsif

Berfungsi dengan sempurna pada semua saiz skrin.

Sedia Salin-Tampal

Dapatkan kod CSS yang bersih serta-merta.

Pratetap Tersedia

Mulakan dengan kecerunan yang telah ditetapkan yang cantik.

Related Tools

Penukar Sass kepada CSS

Ubah kod Sass anda kepada CSS. Pantas, mudah dan selamat.

Penukar Stylus kepada CSS

Ubah kod SCSS anda kepada CSS. Pantas, mudah dan selamat.

Jana Transformasi CSS3 dengan Mudah

Alat yang berkuasa dan intuitif untuk mencipta transformasi CSS3 yang kompleks tanpa menulis kod. Visualisasikan perubahan dalam masa nyata dan salin CSS yang dijana untuk digunakan dalam projek anda.

Penukar CSS kepada Stylus

Ubah kod CSS anda kepada sintaks Stylus. Pantas, mudah dan selamat.

Kalkulator GST

Kira Cukai Barang dan Perkhidmatan (GST) dengan kalkulator GST kami yang mudah digunakan.

Kalkulator Hash Shake-256

Jana cincang Shake-256 dengan cepat dan mudah