Pembuat Gradien Linier CSS Buat gradien linier CSS dengan warna kustom, sudut, dan pemberhentian warna.

🎨

Pembuat Gradien Linier

Buat gradien linier CSS dengan warna kustom, sudut, dan pemberhentian warna.

Tentukan Warna

Pilih warna awal dan akhir, serta opsional tambahkan pemberhentian warna intermediate.

Sesuaikan Sudut

Atur arah gradien dari 0° hingga 360°.

Salin CSS

Salin kode CSS linear-gradient() yang dihasilkan untuk proyek Anda.

Loading tool...

What Is Pembuat Gradien Linier?

Pembuat gradien linier menghasilkan transisi warna yang halus sepanjang garis lurus, menghasilkan kode CSS linear-gradient() untuk digunakan langsung dalam proyek web. Anda dapat menyetel warna awal, warna akhir, sudut gradien, dan menambahkan beberapa pemberhentian warna intermediate dengan kontrol posisi yang presisi. Gradien linier adalah salah satu fitur CSS yang paling serbaguna, digunakan untuk latar belakang, overlay, efek teks, dan elemen dekoratif. Alat ini menyediakan pratinjau visual waktu nyata dari gradien Anda bersama dengan kode CSS yang siap disalin. Antarmuka interaktif memungkinkan Anda bereksperimen dengan kombinasi warna, arah, dan posisi pemberhentian yang berbeda untuk membuat semua hal mulai dari efek pudar dua-warna yang halus hingga transisi multi-warna yang kompleks.

Why Use Pembuat Gradien Linier?

Pratinjau visual waktu nyata saat menyesuaikan warna dan sudut
Tambahkan pemberhentian warna intermediate tanpa batas dengan kontrol posisi
Kontrol sudut penuh 360° untuk arah gradien apa pun
Menghasilkan kode CSS yang bersih dan siap produksi
Hapus pemberhentian warna dengan mudah untuk eksperimen cepat

Common Use Cases

Latar Belakang Hero

Buat latar belakang gradien yang menarik perhatian untuk bagian hero dan halaman pendaratan.

Gaya Tombol

Desain tombol gradien yang menonjol dengan transisi warna yang mulus.

Efek Overlay

Lapiskan gradien di atas gambar untuk keterbacaan teks atau efek artistik.

Pemisah Bagian

Gunakan gradien yang halus untuk memisahkan bagian halaman secara visual tanpa garis keras.

Technical Guide

CSS linear-gradient() membuat transisi warna sepanjang garis yang didefinisikan oleh sudut. Sintaksnya adalah: linear-gradient(sudut, warna1 posisi1, warna2 posisi2, ...). Sudut ditentukan dalam derajat (0deg = bawah ke atas, 90deg = kiri ke kanan) atau kata-kata kunci (ke kanan, ke bawah kiri). Pemberhentian warna mendefinisikan di mana setiap warna ditempatkan sepanjang garis gradien sebagai persentase (0% = awal, 100% = akhir). Browser menginterpolasi warna antara pemberhentian menggunakan ruang warna sRGB. Beberapa pemberhentian pada posisi yang sama membuat transisi warna yang keras. Gradien dapat menggunakan format warna CSS apa pun (hex, rgb, hsl, nama warna) dan mendukung transparansi melalui rgba/hsla. Browser modern semua mendukung linear-gradient() tanpa awalan vendor. Untuk kinerja, gradien CSS dirender oleh GPU dan lebih efisien daripada gambar gradien.

Tips & Best Practices

1
Gunakan 90° untuk gradien horizontal kiri-ke-kanan dan 180° untuk vertikal atas-ke-bawah
2
Tambahkan pemberhentian warna pada 50% untuk membuat titik tengah yang jelas dalam gradien Anda
3
Gunakan warna semi-transparan (rgba) untuk gradien overlay di gambar
4
Beberapa pemberhentian pada posisi yang sama menciptakan pita warna yang keras bukan transisi yang mulus
5
Gradien yang halus (nuansa serupa) sering terlihat lebih profesional daripada yang dramatis

Related Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Pembuat Gradien Radial

Buat gradien radial CSS dengan bentuk, posisi, dan warna yang dapat disesuaikan.

🎨 Color Tools

Pembuat Gradien Konis

Buat gradien konis CSS untuk bagan pie, roda warna, dan efek sapuan.

🎨 Color Tools

Pencampur Warna

Campurkan dua warna bersama dengan rasio yang dapat disesuaikan dan lihat gradien penuh.

🎨 Color Tools

Pembuat Filter CSS

Terapkan efek filter CSS seperti blur, kecerahan, kontras, dan lainnya dengan kontrol visual.

🎨 CSS & Design

Frequently Asked Questions

Q Apa itu CSS linear gradient?

CSS linear-gradient() membuat transisi warna yang mulus sepanjang garis lurus. Ini adalah fungsi CSS yang digunakan sebagai nilai background-image, dirender langsung tanpa file gambar.

Q Bisakah saya menggunakan lebih dari dua warna?

Ya! Anda dapat menambahkan sebanyak mungkin pemberhentian warna. Setiap pemberhentian mendefinisikan warna dan posisinya sepanjang garis gradien.

Q Bagaimana cara kerja sudut?

0° dari bawah ke atas. 90° dari kiri ke kanan. 180° dari atas ke bawah. 270° dari kanan ke kiri. Sudut apa pun di antaranya menciptakan gradien diagonal.

Q Apakah CSS gradients berfungsi di semua browser?

Ya, linear-gradient() didukung di semua browser modern (Chrome, Firefox, Safari, Edge) tanpa awalan vendor sejak sekitar tahun 2013.

About This Tool

Pembuat Gradien Linier is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.