digtools
🎨
css-gradient-generator

CSS Gradient
Generator

Buat gradien CSS yang indah (linear, radial, conic) dan latar belakang pola dengan UI yang intuitif. Gratis, aman, berjalan di browser Anda.

✨
GUI Intuitif
Sesuaikan warna dengan mudah lewat slider
👁️
Pratinjau Langsung
Lihat perubahan secara instan
📦
Pola & Preset
24 preset dan 12 generator pola
Sudut 135°

Edit Warna

H
S
L
A
* Klik pada bilah untuk menambah warna (maks 8) | Seret untuk memindah

Kode CSS Dihasilkan

Size24px
Gap Thickness2px
Sudut45°

Kode CSS Dihasilkan

Anda mungkin juga suka

✨

Pembuat CSS View Transition

🎨

Konverter Warna

🎨

Pemilih Warna Gambar

about,

Tentang Generator Gradien CSS

Generator Gradien CSS adalah alat gratis bagi pengembang dan desainer untuk dengan mudah mendesain gradien dan latar belakang pola murni menggunakan CSS, tanpa JavaScript atau file gambar. Melalui UI yang intuitif, Anda dapat membuat berbagai gradien (linear, radial, conic) dan menyalin kodenya.

Anda dapat menyesuaikan posisi warna dan transparansi (alpha) secara mulus. Dengan 24 preset dan 12 jenis generator pola CSS bawaan, Anda dapat bertransisi dengan lancar dari pencarian ide desain hingga implementasi langsung di browser Anda.

how to,

Cara Menggunakan

STEP 1

Pilih Jenis & Pengaturan Dasar

Buka tab 'Gradien' dan pilih gaya yang diinginkan: linear, radial, atau conic. Untuk linear, sesuaikan sudutnya; untuk radial, atur posisi pusat dan bentuk penyebaran cahayanya.

STEP 2

Tambah & Edit Warna

Klik di atas bilah gradien untuk menambahkan titik warna baru. Seret pin secara horizontal untuk menyesuaikan kehalusan transisi, lalu gunakan pemilih warna (HEX atau HSLA) di bagian bawah untuk menyempurnakan warna dan transparansi.

STEP 3

Pratinjau & Salin Kode

Periksa hasilnya secara real-time. Gunakan tombol 'Layar Penuh' di kanan atas untuk melihat tampilan sesungguhnya, lalu klik tombol 'Salin CSS' di bagian bawah untuk menempelkan kode ke stylesheet Anda.

glossary,

Glossary

Gradien CSS
Teknik yang menggunakan fungsi CSS seperti linear-gradient() atau radial-gradient() untuk menggambar latar belakang di mana warna bertransisi dengan halus. Tidak menggunakan gambar sehingga meningkatkan kecepatan muat halaman.
Titik Warna (Color Stop)
Posisi spesifik (dari 0% hingga 100%) dalam gradien yang mendefinisikan warna tertentu. Menempatkan beberapa titik warna secara berdekatan dapat menciptakan garis batas yang tajam pada gradien.
Gradien Linear (linear-gradient)
Metode gradien paling umum di mana warna berubah secara linear di sepanjang sudut (mis. 135deg) atau arah (mis. to right) yang ditentukan.
Gradien Radial (radial-gradient)
Metode gradien di mana warna memancar ke luar dari titik pusat yang ditentukan dalam bentuk lingkaran atau elips.
Gradien Conic (conic-gradient)
Metode gradien di mana warna berubah searah jarum jam mengelilingi titik pusat. Sering digunakan untuk membuat diagram lingkaran murni menggunakan CSS.
Warna HSLA
Metode penentuan warna menggunakan empat nilai: Hue, Saturation, Lightness, dan Alpha. Ini memudahkan penyesuaian intuitif seperti 'membuat warna sedikit lebih gelap'.
faq,

Pertanyaan yang Sering Diajukan

Q.Bisakah saya menggunakan kode gradien ini untuk situs komersial?
Ya, alat ini sepenuhnya gratis untuk penggunaan komersial. Kode CSS yang dihasilkan tidak memiliki batasan hak cipta dan dapat digunakan secara bebas oleh siapa saja.
Q.Bisakah alat ini digunakan di smartphone?
Ya, antarmuka ini sepenuhnya responsif. Pengoperasian drag-and-drop titik warna juga telah dioptimalkan untuk perangkat layar sentuh.
Q.Gradien tidak muncul di browser lama seperti IE.
Browser lama, termasuk IE11, mungkin tidak mendukung fungsi CSS modern (terutama conic-gradient). Kami menyarankan penambahan warna latar belakang solid (background-color) sebagai fallback.
Q.Bagaimana cara mengubah ukuran latar belakang pola yang dihasilkan?
Anda dapat menyesuaikan skala pengulangan menggunakan slider 'Ukuran' di tab Pola. Ini akan secara otomatis memperbarui properti background-size pada CSS.
Q.Apakah mungkin untuk menyimpan gradien sebagai file gambar?
Karena alat ini dirancang untuk menghasilkan kode CSS, tidak ada fitur ekspor langsung ke PNG atau JPG. Namun, Anda dapat membuka mode Layar Penuh dan mengambil tangkapan layar (screenshot).
use cases,

Contoh Penggunaan

🎨

Desain Bagian Hero

Menerapkan gradien pastel atau sunset pada tampilan pertama (bagian hero) sebuah situs dapat meninggalkan kesan visual yang kuat bagi pengguna.

🪟

Menerapkan Glassmorphism

Dengan mengatur latar belakang gradien menggunakan transparansi alfa dan menggabungkannya dengan backdrop-filter: blur(), Anda dapat membuat komponen UI bergaya frosted-glass.

🚀

Pola Latar Belakang Ringan

Menerapkan pola titik atau garis melintang hanya menggunakan CSS tanpa memuat gambar akan menghasilkan desain kaya tanpa menurunkan performa PageSpeed.

📊

Visualisasi Data

Gradien conic sangat berguna untuk membuat diagram lingkaran atau bilah kemajuan sederhana secara murni dengan CSS, tanpa memerlukan pustaka JS yang berat.

Alat Terkait

Generator CSSLihat semua
✨

Pembuat CSS View Transition

Simulasikan animasi View Transition API dan buat kode untuk SPA dan MPA.

🎨

Konverter Warna

Konversi kode HEX/RGB/HSL/CMYK dan buat palet warna.

🎨

Pemilih Warna Gambar

Ekstrak warna dari gambar dan dapatkan kode warna (HEX/RGB)

↔️

Pembuat CSS Clamp

Secara otomatis menghitung nilai fungsi clamp() fluida untuk desain responsif.

✂️

Pembuat clip-path CSS

Buat bentuk clip-path CSS dengan mudah menggunakan operasi seret dan hasilkan kode.

📦

Generator Container Query CSS

Hasilkan container query secara visual dengan pratinjau langsung & konversi.

🖼️

Generator Filter & Blend CSS

Gabungkan filter secara visual, hasilkan kode, dan simpan gambar.

📐

Generator Layout Flexbox/Grid

Buat kode layout dengan GUI visual

☁️

Generator Box-Shadow

Buat bayangan multi-lapis yang indah secara intuitif

Semua Kategori

Alat Web & Pengembang Generator CSS Alat Gambar & Foto Alat Video & Audio SEO & Pemasaran Jaringan & Infrastruktur Analisis & Pemrosesan Teks Alat Keuangan & Gaji Alat Tanggal & Kalender Alat Dokumen & Bisnis Permainan & Acara Kehidupan & Kesehatan Halaman Utama

Kirim Umpan Balik

Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.

Sanggahan

Semua alat yang disediakan di situs ini sepenuhnya gratis untuk digunakan, namun harap gunakan dengan risiko Anda sendiri. Kami tidak memberikan jaminan apa pun terkait keakuratan, kelengkapan, atau keamanan hasil perhitungan, hasil konversi, atau data yang dihasilkan. Harap diketahui bahwa operator tidak bertanggung jawab atas segala kerusakan atau masalah yang disebabkan oleh penggunaan alat-alat ini. Sebagian besar alat memproses file dan perhitungan secara lokal di browser Anda, artinya data yang Anda masukkan tidak dikirim atau disimpan di server kami.