Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Gradien CSS


Latar Belakang Gradien

Gradien CSS memungkinkan Anda menampilkan transisi yang mulus antara dua atau lebih warna yang ditentukan.

CSS mendefinisikan tiga jenis gradien:

  • Gradien Linear (turun/atas/kiri/kanan/diagonal)
  • Gradien Radial (ditentukan oleh pusatnya)
  • Gradien Kerucut (diputar di sekitar titik pusat)

Gradien Linear CSS

Untuk membuat gradien linier, Anda harus menentukan setidaknya dua perhentian warna. Perhentian warna adalah warna yang Anda inginkan untuk membuat transisi yang mulus. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.

Sintaksis

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Arah - Atas ke Bawah (ini default)

Contoh berikut menunjukkan gradien linier yang dimulai dari atas. Mulai merah, transisi ke kuning:

atas ke bawah (default)

Contoh

#grad {
  background-image: linear-gradient(red, yellow);
}

Arah - Kiri ke Kanan

Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Mulai merah, transisi ke kuning:

kiri ke kanan

Contoh

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Arah - Diagonal

Anda dapat membuat gradien secara diagonal dengan menentukan posisi awal horizontal dan vertikal.

Contoh berikut menunjukkan gradien linier yang dimulai dari kiri atas (dan menuju ke kanan bawah). Mulai merah, transisi ke kuning:

kiri atas ke kanan bawah

Contoh

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}


Menggunakan Sudut

Jika Anda ingin lebih mengontrol arah gradien, Anda dapat menentukan sudut, alih-alih arah yang telah ditentukan sebelumnya (ke bawah, ke atas, ke kanan, ke kiri, ke kanan bawah, dll.). Nilai 0deg setara dengan "ke atas". Nilai 90 derajat setara dengan "ke kanan". Nilai 180 derajat setara dengan "ke bawah".

Sintaksis

background-image: linear-gradient(angle, color-stop1, color-stop2);

Contoh berikut menunjukkan cara menggunakan sudut pada gradien linier:

180 derajat

Contoh

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Menggunakan Beberapa Warna Berhenti

Contoh berikut menunjukkan gradien linier (dari atas ke bawah) dengan beberapa perhentian warna:

Contoh

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Contoh berikut menunjukkan cara membuat gradien linier (dari kiri ke kanan) dengan warna pelangi dan beberapa teks:

Latar Belakang Pelangi

Contoh

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Menggunakan Transparansi

Gradien CSS juga mendukung transparansi, yang dapat digunakan untuk membuat efek fading.

Untuk menambahkan transparansi, kami menggunakan fungsi rgba() untuk menentukan perhentian warna. Parameter terakhir dalam fungsi rgba() dapat berupa nilai dari 0 hingga 1, dan ini mendefinisikan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan warna penuh (tanpa transparansi).

Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Ini mulai sepenuhnya transparan, beralih ke warna merah penuh:

Contoh

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Mengulangi gradien linier

Fungsi repeating-linear-gradient() digunakan untuk mengulang gradien linier:

Contoh

Gradien linier berulang:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}