Toolyard

Generator Gradien CSS

Warna

Preset

Cara membuat gradien CSS

  1. Pilih jenis: linear berjalan lurus pada sudut yang Anda atur, radial menyebar melingkar dari tengah, dan konik berputar mengelilingi tengah mulai dari sudut yang Anda atur.
  2. Ubah setiap warna dan geser penggesernya untuk mengatur posisinya, dari 0% sampai 100%. Tambah warna menaruh warna baru di celah terlebar, hingga enam; ✕ menghapus satu.
  3. Atau tekan sebuah preset untuk memulai darinya. Pratinjau langsung berubah; Salin CSS menyalin baris-barisnya untuk ditempel di stylesheet Anda.

Pertanyaan umum

Mengapa ada dua baris background?

Yang pertama warna polos untuk browser langka yang tidak bisa menggambar gradien; yang kedua menggantikannya di semua browser lain.

Apa arti sudutnya?

Untuk gradien linear, 0deg berjalan dari bawah ke atas, 90deg dari kiri ke kanan dan 180deg dari atas ke bawah. Untuk gradien konik, itu tempat warna pertama dimulai, berputar searah jarum jam dari atas.

Bisakah gradien dipakai untuk teks atau garis tepi?

Bisa. Untuk teks, pasang sebagai latar lalu tambahkan background-clip: text dan color: transparent. Untuk garis tepi, pakai di border-image dengan border-image-slice: 1.

Alat developer lainnya