Gawe gradien CSS sing apik kanthi gampang

Gawe gradien linear, radial, lan conic sing nggumunke kanthi antarmuka intuisi. Salin kode CSS lan gunakake ing proyek sampeyan kanthi cepet.

Preview

CSS digawe

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Kontrol Gradien

135°
0%
100%

Preset populer

Tuladha Gradien

Jelajahi conto gradien sing nggumunake iki lan entuk inspirasi kanggo proyek sabanjure. Klik ing sembarang gradien kanggo mbukak menyang generator.

Sunset Blush

A gradien anget inspirasi dening sunsets ayu.

Angin Samudra

Gradien sing tenang nyebabake perasaan banyu pesisir.

Mint Fusion

Gradien seger lan modern nggabungake mint lan biru langit.

Kebon Gembur

A gradien sregep makili kaendahan alam.

Ngimpi Kosmik

Gradien magis sing diilhami dening langit wengi.

Jam emas

Gradien anget sing njupuk inti saka senja.

Dokumentasi Gradien

Apa Gradien CSS?

Gradien CSS ngidini sampeyan nampilake transisi sing lancar ing antarane rong warna utawa luwih. Bisa digunakake minangka latar mburi kanggo unsur lan kasedhiya ing telung jinis:

  • Gradien Linear:Werna transisi ing sadawane garis lurus.
  • Gradien Radial:Werna transisi saka titik tengah metu.
  • Gradien Conic:Werna transisi ngubengi titik tengah ing bunder.

Cara Gunakake Gradient

Sawise sampeyan nggawe gradien nggunakake alat kita, sampeyan bisa nggunakake kode CSS ing proyek sampeyan:

  1. Nyalin kode CSS saka generator.
  2. Tempel menyang file CSS, utawa gunakake inline ing unsur HTML.
  3. Gunakake gradien menyang unsur apa wae nggunakakebackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Gunakake luwih saka rong warna kanggo efek gradien sing luwih kompleks.
  • Nyetel posisi werna kanggo ngontrol ngendi transisi dumadi.
  • Gabungke macem-macem gradien kanggo efek sing luwih kreatif.
  • Kanggo gradien conic, ngganti tengah nggawe pola sing menarik.
  • Simpen gradien favorit kanggo nggunakake mengko.

Dhukungan Browser

Gradien CSS akeh didhukung ing browser modern. Nanging, browser lawas kaya Internet Explorer bisa uga ora nerjemahake kanthi bener. Tansah menehi warna mundur:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Babagan Alat Iki

Generator Gradien CSS kita dirancang kanggo mbantu pangembang lan desainer nggawe gradien sing apik kanthi gampang. Apa sampeyan nggarap situs web, aplikasi, utawa mung pengin eksprimen karo warna, alat iki nggampangake nggawe gradien sing cocog kanggo proyek sampeyan.

Features

Gampang kanggo Gunakake

Antarmuka intuisi kanggo nggawe gradien.

Desain Responsif

Bisa dianggo kanthi sampurna ing kabeh ukuran layar.

Salin-Tempel Siap

Entuk kode CSS sing resik kanthi cepet.

Preset kasedhiya

Miwiti kanthi gradien sing wis ditemtokake sing apik.

Related Tools

Nggawe Transformasi CSS3 kanthi Gampang

Alat sing kuat lan intuisi kanggo nggawe transformasi CSS3 sing kompleks tanpa nulis kode. Visualisasi owah-owahan ing wektu nyata lan salin CSS sing digawe kanggo digunakake ing proyek sampeyan.

Kurang kanggo Konverter CSS

Ganti kode Kurang dadi CSS. Cepet, gampang, lan aman.

Generator Transisi CSS3

Transisi opacity lancar

Kalkulator Hash SHA-2

Gawe hash SHA-2 kanthi cepet lan gampang

Alat Encode URL

Encode parameter URL kanthi gampang ing browser sampeyan.

Rata-rata Kalkulator

Cepet ngitung rata-rata (rata-rata aritmetika) saka sakumpulan angka kanthi alat sing gampang digunakake.