Generator Gradient Border CSS

Cara kerjanya

1. Pilih warna: pilih dua warna atau lebih untuk gradien melalui pemilih warna.
2. Sesuaikan lebar dan radius: sesuaikan ketebalan dan kelengkungan sudut sesuai desain Anda.
3. Salin CSS: kode yang dihasilkan melalui border-image atau teknik pseudo-element siap untuk ditempel di stylesheet Anda.

Mengapa menggunakan generator border gradien ini?

Border gradien CSS adalah detail desain yang mencolok yang digunakan dalam framework UI modern, kartu, status hover tombol, dan seksi yang ditonjolkan. Namun, properti CSS border hanya menerima warna solid, membuat border gradien memerlukan trik melalui border-image atau pseudo-element dengan manipulasi background-clip. Generator ini mencakup kedua teknik dan menghasilkan CSS yang bersih dan siap salin sehingga Anda dapat fokus pada desain daripada sintaks.

Fitur

• Dua metode: pilih antara border-image (sederhana) dan teknik pseudo-element dengan background-clip (mendukung border-radius).
• Dukungan border-radius: metode pseudo-element memungkinkan sudut membulat yang tidak dapat dihasilkan border-image.
• Gradien multi-stop: tambahkan sebanyak tahapan warna sesuka Anda untuk efek pelangi atau warna merek.
• Pratinjau langsung: lihat persis bagaimana tampilan border sebelum menyalin kode.
• Kontrol sudut: putar arah gradien dengan pemilih sudut visual.

Pertanyaan umum

Mengapa saya tidak bisa menggunakan border-image dengan border-radius?

border-image sepenuhnya mengganti rendering border dan mengabaikan border-radius, sudutnya tetap persegi. Untuk menggabungkan border gradien dan sudut membulat, gunakan teknik pseudo-element: terapkan gradien sebagai latar belakang ::before dan background-clip: padding-box pada elemen itu sendiri.

Bisakah saya menganimasikan border gradien?

Ya. Border gradien yang dibuat dengan metode background + pseudo-element dapat dianimasikan dengan transisi background-position pada gradien. Terapkan background-size: 300% 300% dan animasikan background-position untuk efek halus.

Apakah ini berfungsi pada tombol dan kolom input?

Ya, CSS yang dihasilkan berfungsi pada elemen HTML apa pun. Untuk tombol, lebih baik gunakan pseudo-element untuk mempertahankan border-radius. Untuk kolom input, terapkan teknik border-image atau bungkus input dalam kontainer gradien.

Apa yang sebenarnya diselesaikan border gradien CSS

Properti border CSS menerima satu warna solid, bukan gradien. Ini adalah keterbatasan era 1996 yang bertahan ke CSS modern. Untuk sebagian besar sejarah web, desainer yang ingin garis besar gradien di sekitar kartu atau tombol harus memilih antara menggunakan gambar latar belakang (raster, tidak menyesuaikan skala), membungkus elemen dalam wadah berwarna (berfungsi tetapi merusak tata letak dengan cara halus), atau menerima border solid. Border gradien CSS adalah solusi yang mensimulasikan tampilan border: 3px solid linear-gradient(...) melalui properti CSS lainnya, karena sintaks tepat itu tidak ada.

Dua teknik mendominasi. border-image (CSS Backgrounds and Borders Module Level 3, 2012) menggantikan rendering border dengan gradien atau gambar. Berfungsi, tetapi border-image mengabaikan border-radius sepenuhnya: sudut tetap persegi. Teknik pseudo-element + background-clip menggunakan elemen wrapper dengan latar belakang gradien dan overlay dalam yang menutupi semuanya kecuali area border. Ini mendukung sudut bulat tetapi memerlukan dua lapisan CSS dan penanganan padding versus content box yang hati-hati. Pendekatan modern ketiga menggunakan mask-composite (browser 2020+) untuk solusi elemen tunggal yang lebih bersih.

Border gradien penting untuk tren desain saat ini. Tata letak berbasis kartu (Stripe, Linear, Vercel, Cursor) menggunakan border gradien dua warna yang halus untuk menambah kedalaman tanpa berat. Sorotan fitur premium sering menggambar border gradien berwarna untuk menunjukkan status "Pro". Estetika cyberpunk dan synthwave menggunakan border gradien neon untuk membangkitkan getaran retro-masa-depan. Peluncuran produk AI di 2023-2024 menstandarkan border gradien animasi multi-warna sebagai tanda tangan visual (OpenAI, Anthropic, Perplexity). Apa yang dulu memerlukan editor gambar sekarang dikirim sebagai 5 hingga 10 baris CSS.

Cara kerja alat ini di balik layar

Pratinjau adalah satu div dengan dua teknik yang diterapkan melalui CSS sebaris, dapat dialihkan oleh pilihan metode Anda. Untuk border-image, alat mengatur border: Npx solid transparent dengan border-image: linear-gradient(...) 1; nilai slice 1 memberi tahu browser untuk menggunakan gradien pada ukuran penuh untuk setiap tepi border. Untuk teknik pseudo-element, alat menerapkan latar belakang gradien ke elemen luar dan menggunakan ::before (atau background-clip: padding-box) untuk menutupi area konten dalam, hanya menyisakan cincin border yang terlihat.

Color stops disimpan sebagai array JavaScript dari pasangan {color, position}. Saat Anda memilih warna atau memindahkan slider sudut, alat merekonstruksi string linear-gradient() dengan menggabungkan stops dengan koma dan mendahului sudut: linear-gradient(45deg, #ff0080 0%, #7928ca 100%). String itu diinterpolasi ke dalam CSS pratinjau dan kotak kode. Slider sudut menggunakan rentang 0 hingga 360 derajat dengan rotasi panah SVG visual untuk umpan balik orientasi.

Tidak ada yang meninggalkan browser Anda. Pembuatan string gradien, penyimpanan warna, rendering pratinjau, dan penyalinan clipboard semuanya terjadi di JavaScript pada perangkat Anda. Tidak ada permintaan jaringan yang dibuat; tidak ada analitik yang melacak warna apa yang Anda pilih. Alat tidak memiliki backend sama sekali di luar HTML statis dan JavaScript yang disajikan sekali pada pemuatan pertama. Segarkan halaman dan warna serta sudut yang Anda pilih hilang kecuali Anda menyalin CSS terlebih dahulu.

Sejarah singkat border CSS dan gradien

• Border CSS 1, 1996.Spesifikasi CSS pertama (CSS 1, Desember 1996) mendefinisikan border-style, border-width, dan border-color, hanya mendukung warna solid dan delapan gaya border (none, dotted, dashed, solid, double, groove, ridge, inset, outset). Tidak ada dukungan gradien, pilihan arsitektural yang bertahan selama 16 tahun.
• CSS linear-gradient dikirim, 2008 hingga 2011.WebKit memperkenalkan -webkit-gradient() pada 2008, diikuti oleh linear-gradient() yang distandarisasi di CSS Image Values and Replaced Content Module Level 3 (2011). Gradien menjadi warga CSS kelas satu untuk latar belakang, tetapi bukan border. Desainer langsung menginginkan border gradien; spesifikasi tidak mengakomodasi.
• border-image tiba, 2012.CSS Backgrounds and Borders Module Level 3 (CR Juni 2012) mendefinisikan border-image dengan dukungan browser penuh pada 2014. Memungkinkan border menggunakan gambar apa pun, termasuk gradien CSS. Tangkapannya: border-image menimpa border-radius, jadi border gradien bulat tetap tidak mungkin dengan teknik ini sendiri.
• Pola solusi pseudo-element muncul, 2013 hingga 2015.CSS-Tricks dan sumber daya serupa menerbitkan solusi menggunakan pseudo-element ::before dengan latar belakang gradien dan trik background-clip: padding-box. "Border gradien bulat" menjadi dapat dipecahkan tetapi memerlukan pemahaman tentang seluk-beluk box-model. Pada 2015, pola itu tersebar luas dalam dokumentasi sistem desain.
• Conic-gradient mendarat, 2018 hingga 2021.CSS conic-gradient() (Chrome 69, September 2018; Firefox 83, November 2020; Safari 12.1, Maret 2019) memungkinkan gradien sapuan melingkar, ideal untuk efek "cincin pemuatan" dengan border gradien. Dikombinasikan dengan animasi, border conic-gradient menciptakan pola cahaya berputar yang populer dalam peluncuran produk AI di 2023.
• Mask-composite membuka solusi yang lebih bersih, 2020 hingga 2024.CSS Masking Module Level 1 (2014) dan dukungan mask-composite di browser modern (2020+) memungkinkan border gradien elemen tunggal tanpa pseudo-element: lapis latar belakang gradien dan tutupi semuanya kecuali cincin luar melalui operasi komposit. Pada 2024 ini adalah pendekatan produksi terbersih, meskipun solusi pseudo-element tetap kompatibel dengan browser yang lebih lama.

Alur kerja dunia nyata

• Aksen halus komponen kartu.Kartu dasbor modern (pikirkan Stripe, Linear, Vercel) menggunakan border gradien 1 hingga 2 piksel dalam skema warna dua-nada atau tiga-nada untuk menambah minat visual tanpa berat. Gradien biasanya halus: opasitas 10% hingga 20%, kontras rendah, sebagian besar grayscale dengan sedikit warna merek. Ini cukup untuk membedakan kartu dari latar belakang yang rata dan menandakan interaktivitas.
• Sorotan fitur premium.Tabel harga SaaS menggunakan border gradien yang hidup (sering emas-ke-ungu atau pelangi) pada paket "Pro" atau "Direkomendasikan" untuk mengangkatnya secara visual. Pola ini berfungsi karena menarik mata melalui warna dan gerakan (jika dianimasikan) tanpa memerlukan label lencana. Linear, Notion, Figma, dan sebagian besar halaman harga SaaS modern menggunakan pola persis ini.
• Efek neon dan cahaya.Estetika cyberpunk, synthwave, dan UI game menggabungkan border gradien dengan box-shadow untuk tampilan tabung neon. Border memberikan transisi warna, bayangan memberikan bloom. Pola umum: border-image: linear-gradient(45deg, #ff0080, #00d4ff) 1 ditambah box-shadow: 0 0 20px rgba(255,0,128,0.5) pada elemen yang sama.
• Identitas visual produk AI.Gelombang alat AI 2023-2024 (OpenAI ChatGPT, Anthropic Claude, Perplexity, Cursor) menyatu pada border gradien multi-warna animasi sebagai tanda tangan visual untuk "AI sedang berpikir" atau bidang input yang menunggu pemrosesan AI. Biasanya gradien conic berputar atau gradien linear yang bergeser pada loop 4 hingga 6 detik. Menjadi singkatan untuk "cerdas / generatif" di UX modern.
• Pemolesan keadaan hover dan fokus.Tombol dan input yang beralih dari border solid dalam keadaan istirahat ke border gradien pada hover atau fokus terasa premium dan disengaja. Transisi antara warna dapat dianimasikan dengan transisi CSS pada background-position jika gradien meluas melampaui area yang terlihat (background-size: 200% 100% dengan animasi geser).
• Ekspresi warna merek.Sistem merek dengan logo multi-warna (Instagram, Slack, Discord) sering menggunakan border gradien untuk memperluas identitas mereka ke komponen UI. Kartu dengan gradien merek sebagai border-nya membangun kontinuitas visual dengan logo. Untuk halaman pemasaran SaaS, ini adalah salah satu cara termurah untuk membuat komponen umum terlihat "bermerek".

Jebakan umum dan artinya

• border-image mengabaikan border-radius.Kebingungan paling umum: menggunakan border-image: linear-gradient(...) bersama dengan border-radius menghasilkan sudut persegi. border-image mengambil alih rendering border sepenuhnya dan properti radius tidak berpengaruh pada hasil yang dilukis. Untuk mendapatkan border gradien bulat, gunakan teknik pseudo-element atau pendekatan mask-composite modern, bukan border-image.
• Teknik pseudo-element memerlukan padding-box.Solusi standar menggunakan background pada elemen luar dan overlay dalam melalui ::before. Detail penting: overlay dalam memerlukan background-clip: padding-box agar berhenti di tepi padding, menyisakan area border yang terlihat. Melewatkan properti clip ini menghasilkan gradien yang sepenuhnya tertutup oleh overlay, tidak ada border yang terlihat.
• Menganimasikan border gradien mahal untuk GPU.Border gradien animasi (pola "AI shimmer") berfungsi dengan mentransisikan background-position pada gradien besar. Sementara GPU modern menanganinya dengan baik, menerapkannya ke banyak elemen secara bersamaan (misalnya, setiap kartu di halaman) menurunkan frame rate secara nyata di perangkat kelas rendah. Gunakan border gradien animasi dengan hemat: satu atau dua elemen "hero" per halaman, bukan di seluruh situs.
• Bentrokan warna mode gelap.Border gradien yang dirancang untuk latar belakang terang sering terlihat salah pada latar belakang gelap. Gradien putih murni menjadi tidak terlihat; warna-warna cerah terlihat terlalu jenuh. Untuk desain dual-tema, definisikan color stop gradien terpisah untuk mode terang dan gelap melalui properti khusus CSS atau media query. Kurangi saturasi dan sesuaikan rona untuk menjaga harmoni visual dengan tema sekitarnya.
• Border kontras rendah gagal aksesibilitas.Border gradien halus yang terlihat elegan dapat gagal WCAG 2.1 SC 1.4.11 Kontras Non-teks (minimum 3:1) untuk komponen UI yang menyampaikan status. Jika border gradien adalah satu-satunya indikator visual dari batas tombol atau kemampuan pemilihan kartu, pastikan kontras yang memadai dengan latar belakang. Untuk border yang murni dekoratif pada elemen yang sudah terlihat, kontras kurang penting tetapi masih layak diperiksa.
• Internet Explorer dan Edge lama tidak mendukung apa pun yang berguna.IE 11 (pensiun Juni 2022) dan Edge pra-Chromium (2015 hingga 2019) tidak memiliki border-image yang andal untuk gradien, mask-composite, dan beberapa teknik pseudo-element. Untuk browser warisan ini, mundur dengan anggun ke border solid menggunakan warna tengah gradien. Browser modern mencakup 99%+ pengguna pada 2026, tetapi fallback warisan tetap penting untuk perangkat lunak perusahaan.

Privasi: semuanya berjalan di browser Anda

Alat generator CSS hadir dalam dua varian: halaman HTML sederhana yang menjalankan JavaScript sisi klien (pribadi, cepat) dan editor cloud yang menyimpan proyek Anda (kolaboratif tetapi dengan trade-off privasi). Alat ini adalah jenis pertama. Warna yang Anda pilih, sudut Anda, CSS yang dihasilkan: semuanya tetap di sesi browser Anda. Segarkan halaman dan keadaan hilang kecuali Anda menyalin CSS terlebih dahulu. Tidak ada server yang menyimpan pilihan gradien Anda, tidak ada analitik yang melacak kombinasi warna yang Anda coba, dan tidak ada akun yang diperlukan.

Properti privasi paling penting untuk pekerjaan desain kepemilikan. Studio yang membuat prototipe kombinasi gradien untuk redesain merek rahasia, pengembang yang bekerja pada aksen UI produk yang belum diumumkan, atau desainer yang mengulang palet kampanye: konteks apa pun di mana pilihan warna atau riwayat iterasi dapat membocorkan informasi tentang pekerjaan. Dengan alat ini, tidak ada yang ditangkap karena tidak ada yang dikirim. Buka tab Jaringan browser dan Anda akan melihat nol permintaan keluar selama penggunaan; hanya pemuatan halaman awal mengambil HTML dan JavaScript.

Saat alat lain adalah pilihan yang tepat

• SVG untuk bentuk border yang kompleks.Untuk border gradien non-persegi panjang (bulat dengan takik, tepi bergerigi, bentuk tidak beraturan kustom), SVG dengan linearGradient atau radialGradient diterapkan ke atribut stroke memberikan kontrol penuh. Border gradien CSS berfungsi untuk persegi panjang dan persegi panjang bulat; SVG menangani semua yang lain. Gunakan keduanya bersama-sama: SVG untuk garis besar bentuk dekoratif, CSS untuk komponen UI standar.
• Photoshop untuk gambar gradien statis.Jika border gradien ada pada gambar atau spanduk hero statis yang tidak akan berubah, mendesainnya di Photoshop, Figma, atau Sketch dan mengekspornya sebagai PNG atau WebP bisa lebih sederhana daripada mempertahankan CSS. Gambar menskala sebagai bagian dari pipeline aset halaman. Border gradien CSS adalah untuk elemen dinamis (kartu, tombol, komponen) yang perlu dirender pada ukuran apa pun.
• Pustaka komponen untuk konsistensi sistem desain.Tailwind UI, shadcn/ui, Radix, dan pustaka komponen lain mengirimkan komponen kartu dan tombol yang telah ditata sebelumnya dengan varian border gradien opsional. Untuk proyek yang sudah menggunakan pustaka ini, menerapkan varian pustaka lebih cepat daripada menggulirkan CSS sendiri. Border gradien yang digulung tangan berguna untuk desain sekali pakai atau proyek yang belum berkomitmen pada pustaka komponen.
• Canvas atau WebGL untuk efek multi-lapisan animasi.Untuk efek gradien multi-lapisan yang sangat animasi (sistem partikel, simulasi fluida, seni generatif), Canvas 2D atau WebGL menyediakan kontrol per-piksel yang tidak dapat ditandingi CSS. Trade-off adalah kompleksitas implementasi dan aksesibilitas (konten canvas tidak terlihat oleh pembaca layar). Untuk border gradien dekoratif pada komponen UI standar, CSS adalah pilihan yang tepat; untuk efek visual, pertimbangkan pendekatan berbasis canvas.

Pertanyaan lain yang sering ditanyakan

Bisakah saya menggunakan lebih dari dua warna dalam border gradien?

Ya. CSS linear-gradient() menerima color stop tanpa batas: linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%) membuat gradien tiga warna yang bertransisi melalui oranye di tengah. Tambahkan stop sebanyak yang Anda inginkan, masing-masing dengan posisi opsional. Untuk gradien multi-warna kompleks (efek pelangi), distribusikan stop secara merata: 0%, 16.7%, 33.3%, 50%, 66.7%, 83.3%, 100%.

Bagaimana saya membuat border gradien pelangi atau conic?

Untuk gradien conic (sapuan), gunakan conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red) sebagai latar belakang elemen luar dengan teknik masking padding-box pseudo-element. Untuk efek berputar (populer di status pemuatan produk AI), animasikan --angle melalui CSS Houdini atau gunakan @property --angle dengan animasi rotasi 360 derajat. Hasilnya adalah sapuan warna halus di sekitar border.

Bisakah saya menggunakan properti khusus CSS untuk border gradien yang sadar tema?

Ya, dan itu adalah pendekatan yang direkomendasikan untuk sistem desain. Definisikan warna gradien sebagai properti khusus CSS (--gradient-start, --gradient-end) dan gunakan dalam deklarasi gradien Anda: linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end)). Timpa variabel dalam media query mode gelap atau kelas tema. Satu file CSS menangani tema terang dan gelap melalui redefinisi variabel.

Apakah ini berfungsi di browser lama seperti Internet Explorer?

Internet Explorer 11 (secara resmi pensiun oleh Microsoft pada Juni 2022) memiliki dukungan border-image parsial tetapi rendering gradien yang tidak dapat diandalkan, dan tidak ada mask-composite. Browser modern (Chrome 88+, Firefox 78+, Safari 14+) sepenuhnya mendukung kedua teknik. Jika Anda harus mendukung IE, berikan fallback warna solid menggunakan warna tengah gradien: deklarasikan border: 3px solid #888; sebelum aturan gradien, dan IE akan menggunakan itu sementara browser modern menerapkan gradien.

Apakah ada cara properti tunggal untuk membuat border gradien?

Belum di CSS standar. Proposal modern (draf CSS Backgrounds and Borders Module Level 4) termasuk properti border-color yang menerima gradien secara langsung, tetapi implementasi browser belum stabil. Aproksimasi terdekat saat ini adalah teknik mask-composite yang menggunakan elemen tunggal tetapi masih memerlukan tiga deklarasi CSS. Semoga pada 2027 atau 2028, border: 3px solid linear-gradient(...) akan bekerja begitu saja.

Mengapa border gradien saya terlihat berbeda di Safari?

Safari secara historis tertinggal Chrome dan Firefox dalam paritas fitur CSS, terutama untuk nilai mask-composite dan beberapa kasus tepi background-clip. Uji di Safari secara eksplisit. Jika teknik pseudo-element gagal di Safari, beralih ke border-image (yang berfungsi secara universal tetapi kehilangan border-radius), atau gunakan prefiks khusus Safari: -webkit-mask-composite mungkin diperlukan untuk versi Safari yang lebih lama. iOS Safari sering memerlukan prefiks bahkan dalam versi 2024.