Generator Gradien CSS

Gradien adalah gambar, bukan warna

Gradien CSS dihasilkan oleh fungsi linear-gradient, radial-gradient, atau conic-gradient, dan masing-masing menghasilkan sebuah nilai gambar, bukan warna. Fakta tunggal itu menjelaskan sebagian besar perilaku gradien. Karena hasilnya adalah gambar, Anda menetapkannya ke properti yang menerima gambar, paling sering background atau background-image, dan ia menyusun ubin, menskala, serta menumpuk seperti latar lainnya. Ia juga tidak memiliki ukuran intrinsik; ia mengisi kotak apa pun yang Anda tempati, itulah sebabnya gradien yang sama bisa tampak curam pada sebuah tombol dan lembut di seluruh bagian hero.

Gradien linear dan arah

Gradien linear memadukan warna di sepanjang sumbu lurus. Anda menyetel sumbu itu baik dengan sudut maupun dengan arah berupa kata kunci. Sudut diukur searah jarum jam dari arah lurus ke atas, sehingga 0deg berjalan dari bawah ke atas, 90deg berjalan dari kiri ke kanan, dan 180deg berjalan dari atas ke bawah. Bentuk kata kunci, seperti to right atau to bottom right, sering kali lebih jelas untuk kasus sederhana dan memiliki keuntungan menunjuk persis ke sebuah sudut, yang tidak dapat dilakukan sudut tetap saat bentuk kotak berubah.

Slider sudut pada alat ini menuliskan nilai derajat untuk Anda. Sebuah kiat halus: gradien yang berjalan pada diagonal yang sedikit miring, di sekitar 135deg, hampir selalu terlihat lebih halus daripada perpaduan vertikal atau horizontal yang datar, karena mata membaca diagonal itu sebagai cahaya yang menyapu sebuah permukaan.

Gradien radial dan conic

Gradien radial memadukan warna ke luar dari sebuah titik pusat dalam cincin-cincin konsentris, yang ideal untuk sorotan lampu, vinyet lembut, dan cahaya. Secara default ia membentuk elips yang mengisi kotak, tetapi Anda dapat membuatnya menjadi lingkaran sempurna dan menggeser pusatnya, sehingga sebuah sorotan dapat berada di sudut alih-alih persis di tengah. Gradien radial adalah pilihan alami kapan pun cahaya atau fokus harus tampak datang dari satu titik.

Gradien conic menyapu warna mengelilingi sebuah pusat seperti jarum jam alih-alih ke luar darinya. Sapuan berputar itulah yang menjadikan gradien conic sebagai dasar untuk diagram lingkaran, roda warna, dan cahaya conic yang semakin umum digunakan sebagai aksen kartu. Color stop yang sama yang sudah Anda pahami tetap berlaku; hanya geometri penataannya yang berbeda antara linear, radial, dan conic.

Color stop dan posisi

Setiap gradien didefinisikan oleh color stop, di mana setiap stop adalah sebuah warna dan posisi opsional di sepanjang garis gradien, biasanya ditulis sebagai persentase dari 0 hingga 100. Dengan dua stop Anda mendapatkan perpaduan sederhana; menambah lebih banyak memungkinkan Anda mengarahkan gradien melalui beberapa warna. Jika Anda menghilangkan posisinya, browser menyebarkan stop secara merata, tetapi menyetelnya secara manual adalah cara Anda mengendalikan dengan tepat letak setiap warna dan seberapa banyak ruang yang didapat setiap transisi.

Posisi tidak harus naik secara mulus, dan di situlah gradien menjadi menarik. Mengumpulkan dua stop berdekatan menghasilkan transisi yang cepat, sedangkan merenggangkannya menghasilkan transisi yang lambat dan lembut. Anda bahkan dapat memberi dua stop posisi yang sama untuk menghilangkan perpaduan sepenuhnya, yang merupakan kunci teknik berikutnya.

Hard stop: garis-garis, pita, dan bentuk

Ketika dua color stop yang berdampingan berbagi posisi yang sama, transisi di antara keduanya terjadi pada jarak nol, menghasilkan tepi yang tajam alih-alih perpaduan. Ulangi pola itu dan Anda mendapatkan garis-garis, papan catur, bilah kemajuan, serta pita berkode warna, semuanya digambar dalam CSS tanpa gambar. Misalnya, gradien yang menahan satu warna dari 0 hingga 50 persen dan warna kedua dari 50 hingga 100 persen memberi Anda pembagian dua warna yang bersih tepat di tengah.

Padukan hard stop dengan repeating-linear-gradient atau repeating-radial-gradient maka polanya akan menyusun ubin secara otomatis di seluruh kotak, sehingga Anda dapat membangun garis permen, pita peringatan diagonal, atau garis panduan halus dari satu deklarasi pendek. Karena ini adalah matematika vektor alih-alih bitmap, ia tetap tajam setajam silet pada ukuran apa pun dan kerapatan piksel apa pun.

Transparansi dan penumpukan

Color stop gradien dapat menggunakan warna dengan saluran alpha, dan memudar menjadi warna yang sepenuhnya transparan adalah salah satu langkah paling berguna yang dapat Anda lakukan. Gradien yang berjalan dari warna padat menjadi transparan menciptakan scrim yang Anda lihat di belakang teks di bagian bawah sebuah foto, pudar di tepi daftar yang dapat digulir, dan masker gambar yang lembut. Satu peringatan: pada beberapa interpolasi warna, memudar menjadi transparan polos bisa melewati titik tengah abu-abu yang kusam, jadi memudar menjadi warna yang sama pada alpha nol alih-alih menjadi kata kunci transparent telanjang memberi hasil yang lebih bersih.

Karena gradien adalah gambar, properti background menerima beberapa gradien yang dipisahkan koma, yang dilukis dari depan ke belakang. Menumpuk gradien transparan yang halus di atas gradien dasar adalah cara latar modern yang kaya dibangun tanpa satu pun berkas gambar.

Aksesibilitas: teks di atas gradien

Risiko dengan gradien terletak di bawah teks Anda. Kontras bisa sempurna baik di satu ujung gradien dan gagal parah di ujung lainnya, sehingga judul yang terbaca di atas bagian gelap mungkin lenyap di atas bagian terang. Selalu periksa wilayah kasus terburuk, bukan rata-ratanya. Perbaikan yang andal adalah menempatkan scrim padat semi-transparan, atau gradien khusus gelap-ke-transparan, di antara latar yang ramai dan teks agar rasio kontras tetap aman di mana-mana. Perlakukan titik paling terang di bawah teks terang, dan titik paling gelap di bawah teks gelap, sebagai nilai yang sebenarnya harus Anda lewati.