cv.cm
Semua pelajaran

Pengembang & web

Cara membuat gradien CSS

Anda ingin gradien di belakang halaman, kartu, atau slide, dan menulis CSS dengan coba-coba itu lambat. Anda akan memilih jenis, menempatkan warna, lalu menyalin CSS yang siap ditempel atau menyimpan gambar. Semuanya berjalan di browser Anda.

5 mnt

Hasil hari ini Aturan background CSS dengan warna cadangan polos, atau PNG berukuran 1080p, 1440p, potret, atau persegi.

Teks di atas gradien harus tetap terbaca di kedua ujungnya. Uji warna paling terang dan paling gelap dengan warna teks yang akan dipakai.

Buka Generator gradien CSS
Dalam duduk ini

  1. Pilih jenis gradien

    Linear membaur dalam garis lurus dan cocok untuk sebagian besar latar. Radial menyebar dari tengah, seperti cahaya lembut. Kerucut berputar mengelilingi satu titik, seperti roda warna atau diagram lingkaran.

    Ketiga jenis berbeda pada jalur yang diikuti warnanya.
    Ketiga jenis berbeda pada jalur yang diikuti warnanya.

  2. Buka Generator gradien CSS di cv.cm

    Pilih jenisnya di bagian Gradien. Tekan preset sebagai titik awal atau Acak untuk mencari ide, dan pratinjau langsung berubah.

    Buka Generator gradien CSS

  3. Atur arahnya

    Untuk Linear dan Kerucut, geser Sudut: 0° mengarah ke atas, 90° ke kanan, dan 180° ke bawah. Untuk Radial, pilih Lingkaran atau Elips.

  4. Tempatkan warnanya

    Tiap warna punya posisi dari 0% sampai 100%, dan Anda bisa memakai sampai 6 warna. Tambah warna menyisipkan satu warna, dan × menghapusnya. Posisi berdekatan membuat tepi tajam, dan posisi berjauhan membuat baur yang lembut.

    Tiap warna berada di satu posisi pada garis, dan CSS mencantumkannya berurutan.
    Tiap warna berada di satu posisi pada garis, dan CSS mencantumkannya berurutan.

  5. Salin CSS-nya

    Salin CSS memberi dua baris: warna polos untuk browser yang sangat lama, lalu gradiennya. Tempel keduanya ke aturan CSS elemen Anda. Ini berfungsi di blok apa pun yang punya ukuran, seperti body atau kartu.

  6. Atau simpan PNG

    Untuk slide dan wallpaper, pilih Ukuran gambar lalu tekan Simpan PNG. Ukurannya antara lain 1920 × 1080, 2560 × 1440, 1080 × 1920 untuk ponsel, dan 1080 × 1080 untuk posting persegi.

Pakai dengan alat ini

Tanya jawab

Kenapa gradien saya tidak muncul di halaman?

Kemungkinan elemennya tidak punya tinggi. Gradien mengisi kotak elemen, jadi blok kosong tingginya 0. Beri tinggi atau isi; untuk satu halaman penuh, atur html dan body ke height 100%.

Kenapa ada dua baris background di CSS?

Yang pertama warna polos, dan yang kedua gradiennya. Browser yang tidak bisa menggambar gradien mengabaikan baris itu dan tetap memakai warnanya.

Mana yang lebih baik, background atau background-image?

Keduanya bisa, karena gradien dihitung sebagai gambar. background lebih pendek dan juga mengatur ulang setelan latar lainnya, jadi pakai background-image jika menumpuknya di atas latar lain.

Bagaimana membuat garis warna yang tegas?

Taruh dua warna di posisi yang sama, misalnya keduanya di 50%. Tidak ada ruang untuk membaur, jadi warnanya berubah di satu garis tajam.

Kenapa PNG terlihat bergaris-garis?

Gradien yang sangat lebar antara warna yang mirip bisa menampilkan undakan samar, karena PNG menyimpan 256 tingkat per kanal warna. Pakai warna yang lebih berjauhan, atau tambahkan sedikit tekstur di editor gambar.