Softonic

Generator Gradien CSS

Langkah 1 / 3
Tipe
Berikutnya

Latar belakang antarmuka modern jarang menggunakan warna datar; bagian utama, tombol, dan kartu hampir semuanya menggunakan gradien CSS. Generator ini memungkinkan Anda memilih jenis gradien linier atau radial, menambahkan sebanyak mungkin titik warna sesuai keinginan, mengatur sudut (untuk gradien linier) atau bentuk (untuk gradien radial), serta menyalin nilai background: linear-gradient(…) yang bersih untuk langsung dilekatkan ke dalam stylesheet Anda.

Cara membuat gradien CSS

  1. 1

    Pilih jenis gradien

    Linier (arah berdasarkan sudut) atau radial (lingkaran/elips).

  2. 2

    Atur sudut atau bentuk

    Linier: 0–360°. Radial: lingkaran atau elips.

  3. 3

    Tambahkan stop warna

    Setiap stop warna merupakan kombinasi dari warna dan posisi (0–100%). Gradien dua stop menjadi acuan dasar; gradien tiga stop atau lebih menghasilkan transisi yang lebih mulus.

  4. 4

    Salin CSS

    Hasilnya adalah satu nilai properti `background` yang dapat Anda tempelkan ke dalam berbagai file CSS.

Contekan sintaksis

/* Linier */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radial (lingkaran) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Multi-titik */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Sudut-sudut yang sesuai dengan intuisi

Sudut gradien CSS berbeda dari konsep trigonometri: 0deg mengarah ke atas (utara), 90deg mengarah ke kanan (timur), 180deg mengarah ke bawah, dan 270deg mengarah ke kiri.

Arah Sudut
Dari atas ke bawah 180 derajat
Dari bawah ke atas 0 derajat
Dari kiri ke kanan 90 derajat
Dari kiri atas ke kanan bawah 135 derajat

Menghindari nada tengah yang keruh

Gradien linier antara warna komplementer (misalnya biru → oranye) melewati zona abu-abu sekitar 50%, di mana perpaduan warnanya terasa “mati”. Perbaiki hal ini dengan cara berikut:

  • Menambahkan titik henti tengah dalam warna yang terkait (biru → ungu → oranye).
  • Menggunakan interpolasi OKLCH (linear-gradient(in oklch, ...)) untuk hasil perpaduan yang lebih halus secara perseptual, didukung di semua peramban modern sejak tahun 2024.
  • Menggeser sedikit salah satu ujung warna agar nada tengah berada dalam kelompok warna yang lebih hangat.

Tip kinerja

Gradien digambar oleh GPU dan umumnya memiliki biaya rendah. Namun, proses animasi terhadap satu gradien (misalnya menggunakan trik background-position atau efek kabur SVG) tetap dapat menimbulkan biaya pengolahan grafis; sebaiknya uji coba terlebih dahulu pada ponsel kelas menengah sebelum produk dikirimkan.

Pertanyaan yang Sering Diajukan

Gradien CSS mengukur sudut searah jarum jam dari bagian atas, sedangkan matematika standar mengukurnya berlawanan arah jarum jam dari sisi kanan. Dalam sistem CSS, nilai 90deg menunjukkan arah ke kanan; dalam trigonometri, nilai tersebut setara dengan 0°.

Spesifikasi memungkinkan jumlah berapa pun. Secara praktis, lebih dari 4–5 stop cenderung terasa seperti pelangi; sedangkan dua atau tiga stop yang dipilih dengan baik hampir selalu terlihat lebih rapi.

Ya, tempelkan sebagai nilai sembarang: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Untuk gradien yang dapat digunakan kembali, definisikan utilitas khusus dalam konfigurasi Tailwind Anda.

Editor standar mengirim pengaturan gradien ke server untuk merender pratinjau. Dalam alur terpandu, tipe, sudut, bentuk, dan titik warna juga muncul di URL halaman. Jangan masukkan informasi sensitif; alat ini tidak menyimpan proyek gradien yang dapat digunakan kembali.

Alat Terkait

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 bagi JavaScript biasa, React, atau Vue: TypeScript, Babel, CSS atau Sass, gambar, HtmlWebpackPlugin, server pengembangan, dan baris npm install.

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Validator OpenAPI

Tempel dokumen OpenAPI atau Swagger dalam JSON atau YAML dan periksa struktur intinya: bidang versi, objek info, dan paths, dengan galat dan peringatan yang jelas.

Pemformat PHP

Tambahkan baris baru dan indentasi 2 atau 4 spasi ke cuplikan PHP sederhana. Periksa hasilnya: alat ini bukan parser PHP dan tidak menerapkan PSR-12.

Generator Loader CSS

Buat spinner lingkaran CSS murni: atur diameter, ketebalan border, warna dan kecepatan rotasi, lihat pratinjau langsung, lalu salin CSS siap pakai. Tanpa SVG, tanpa JavaScript.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Alat ini tersedia dalam bahasa lain