Design

Gradien

Transisi yang mulus dan berkelanjutan antara dua warna atau lebih di sepanjang area yang ditentukan.

Gradients can be linear (transitioning along a straight line), radial (transitioning outward from a center point), or conic (transitioning around a center point). In CSS, they are implemented as background-image values using linear-gradient(), radial-gradient(), and conic-gradient() functions. Gradients add depth, dimension, and visual interest to designs. Modern design trends favor subtle gradients for backgrounds and bold, multicolor gradients for branding (as seen with Instagram and Firefox). When creating gradients between certain color pairs, desaturated or muddy midpoints can occur; using OKLCH interpolation helps maintain vivid colors throughout the transition.

Coba Sekarang

Generator Palet

Hasilkan palet warna harmonis menggunakan skema komplementer, analog, triadik, dan komplementer terpisah.

Generator Gradasi

Hasilkan skala nada gaya Tailwind CSS (50–950) dari warna dasar apa pun untuk sistem desain.

Artikel Terkait

CSS color-mix(): Padukan Warna Secara Native di Browser

Pelajari CSS color-mix() untuk memadukan warna native di browser. Kuasai sintaks, ruang warna, dan buat palet dinamis tanpa JavaScript.

Membangun Color Picker Web Component dari Awal

Bangun color picker aksesibel sebagai Web Component. Implementasikan rendering canvas, slider hue, saluran alpha, dan custom events dengan Shadow DOM.

Ruang Warna Perseptual: Lab, LCH, Oklab, OKLCH

Jelajahi ruang warna yang seragam secara perseptual — CIE Lab, LCH, Oklab, dan OKLCH. Pelajari bagaimana setiap ruang warna dirancang, di mana ia unggul, dan mana yang digunakan untuk CSS dan desain.

Membuat OG Image Berwarna dengan Next.js dan Satori

Buat gambar Open Graph dinamis dengan Next.js dan Satori. Buat template OG yang sadar warna dengan gradien, warna brand, dan desain responsif.

Pemisahan Warna Dijelaskan: Menyiapkan File untuk Cetak

Pahami pemisahan warna CMYK, pelat spot color, trapping, dan tanda registrasi. Siapkan file siap cetak dengan pemisahan warna yang benar.

Warna Brand Chainlink: Biru Oracle dan Heksagon

Jelajahi biru khas Chainlink (#375BD2) dan simbolisme heksagonnya. Pelajari bagaimana branding oracle membangun kepercayaan enterprise dalam DeFi.