Lompat ke alat
JoeLucky

Klik ★ pada alat untuk menyimpannya

Kategori Alat

Kode ke GambarPembuat Gradien CSSGlassmorphism CSSPembuat Box ShadowPembuat Loader CSSPembuat Blob SVGSVG ke PNGPemeriksa Kontras WarnaPengubah PX / REM / EM
JoeLucky

Alat online praktis, semua di satu tempat

Kebijakan PrivasiKetentuan Layanan

© 2026 JoeLucky®. Hak cipta dilindungi.

  1. JoeLucky
  2. /CSS & Desain
  3. /Pembuat Gradien CSS

Pembuat Gradien CSS

Rancang gradien linear, radial, dan conic secara visual lalu salin CSS-nya.

deg
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

CSS & DESAIN SERUPA

Lihat semua
Kode ke Gambar

Ubah potongan kode menjadi tangkapan layar yang menarik.

Buka →
Glassmorphism CSS

Buat kode blur latar belakang dan batas tembus pandang secara langsung.

Buka →
Pembuat Box Shadow

Buat bayangan halus berlapis dengan pratinjau interaktif.

💬 Komentar

?

Belum ada komentar. Jadilah yang pertama!

APA ITU Pembuat Gradien CSS?

CSS Gradient Generator memungkinkan Anda mendesain gradien Linear, Radial, dan Conic secara real time — atur titik warna, sudut, dan posisi, lalu salin CSS yang siap dipakai.

Fitur

  1. 3 jenis gradien: Linear (berarah), Radial (dari pusat ke luar), dan Conic (rotasional — bagus untuk diagram lingkaran dan roda warna).
  2. Kontrol sudut: atur 0–360° untuk jenis Linear dan Conic dengan penggeser atau input angka presisi; tombol putar menambah 45° setiap klik.
  3. Titik warna: setiap titik punya pemilih warna dan penggeser posisi (0–100%) tersendiri. Minimal 2 titik — tambahkan sebanyak yang Anda mau.
  4. 10 preset pilihan termasuk Sunset, Ocean, Aurora, dan Conic Pride — klik untuk memuat preset sebagai titik awal.
  5. Pratinjau besar langsung: panel pratinjau 192px dan bilah gradien tipis diperbarui seketika saat Anda mengedit.
  6. Salin CSS satu klik: dapatkan CSS lengkap background: gradient(...); siap ditempel ke stylesheet atau atribut style mana pun.

Cara memakai

  1. Pilih jenis gradien, atur titik warna dan sudut, atau mulai dari preset.
  2. Periksa pratinjau dan tambah atau hapus titik warna sesuai kebutuhan.
  3. Salin CSS yang dihasilkan.

Pertanyaan yang sering diajukan

Jenis gradien apa saja yang didukung?

Gradien linear, radial, dan conic.

Bagaimana cara menyalin CSS yang dihasilkan?

Klik tombol salin di samping kotak kode.

Bisakah saya menambahkan banyak titik warna?

Bisa. Seret atau tambah/hapus pegangan titik warna pada penggeser gradien.

Buka →