Developer & Keamanan
Atur warna, sudut, dan bayangan secara visual, lalu salin kodenya. Ada contoh siap pakai untuk memulai dengan cepat.
Gratis · tanpa akun · diproses di browser Anda · diperbarui
Contoh siap pakai
Jenis
CSS
background: #ff6a00;
background-image: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);Tailwind CSS (kelas arbitrer)
bg-[linear-gradient(135deg,_#ff6a00_0%,_#ee0979_100%)]Pilih tab Gradient atau Box shadow, lalu mulai dari contoh atau atur sendiri.
Ubah warna, posisi, sudut, blur, dan sebaran sambil melihat pratinjau langsung.
Salin kode CSS atau kelas Tailwind-nya ke proyek Anda.
Linear gradient mengalir lurus pada sudut tertentu (0° ke atas, 90° ke kanan), radial memancar dari satu titik berbentuk lingkaran atau elips, dan conic berputar mengelilingi titik pusat seperti roda warna. Setiap gradient butuh minimal dua titik warna dengan posisi 0–100% dan opasitas; titik diurutkan otomatis. Kode yang dihasilkan menyertakan warna dasar cadangan untuk browser yang tidak mendukung gradient.
Bayangan terdiri dari geser X, geser Y, blur, sebaran (spread), warna, dan opsi inset untuk bayangan ke dalam. Beberapa lapisan dipisahkan koma untuk kesan kedalaman yang lebih natural, misalnya satu bayangan tajam dekat objek dan satu bayangan lembut yang jauh. Hasilnya bisa disalin sebagai deklarasi CSS atau kelas arbitrer Tailwind (spasi di dalam nilai ditulis sebagai garis bawah).
Pakai background-image: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%). Alat ini menyusun nilai itu dari warna dan posisi yang Anda pilih.
Blur menghaluskan tepi bayangan; spread memperbesar atau mengecilkan ukuran bayangan sebelum diburamkan. Nilai spread negatif membuat bayangan lebih kecil dari elemen.
Salin kelas arbitrer, mis. bg-[linear-gradient(...)] atau shadow-[...]. Spasi di dalam nilai ditulis sebagai garis bawah (_).
Tidak. Semuanya dihitung di browser Anda.
Butuh lebih dari sekadar tools?
Tools ini hanya sebagian kecil dari yang bisa dikerjakan Tipamedia. Ceritakan kebutuhan Anda, kami bantu merumuskan langkah berikutnya.