Penjana Gradient

Bina CSS gradient secara visual dengan gradient generator dan salin kod linear-gradient untuk latar belakang, butang dan aksen UI.

⌘ Berjalan dalam pelayar ◴ Data tidak disimpan ⌁ Percuma

Niat carian

Gradient CSS terus guna untuk UI dan halaman utama

Bina kod gradient CSS untuk latar belakang, butang, dan seksyen, kemudian salin terus ke stylesheet anda.

Gunakan generator untuk melaras jenis linear/radial, pemberhentian warna, sudut dan arah, kemudian bandingkan pratonton langsung sebelum mengeksport.

Salin nilai `linear-gradient(...)` atau `radial-gradient(...)` yang terhasil dan tampal terus ke `background`/`background-image`.

Hero, sorotan kad, latar butang, banner dan bahagian jenama di mana transisi warna terkawal membantu hierarki visual.

Seimbangkan warna jenama dengan titik henti dan arah (contoh `to right`, `90deg`, `to bottom right`) supaya sesuai kebolehbacaan dan tone.

Selepas tampal, sahkan kontras teks, konsistensi warna jenama, dan rendering di pelayar utama (Chrome/Firefox/Safari).

Alat ini menumpukan kepada penjanaan dan penyalinan CSS dengan cepat; validasi kontras aksesibiliti dan rupa cross-browser selepas dipraktikkan.

Color stops Jenis

CSS gradient yang dijana

1 Pilih gradient linear atau radial dan laraskan sudut.
2 Tambah color stop atau ubah warna dan kedudukannya sambil menyemak pratonton.
3 Salin kod CSS gradient yang dijana ke dalam stylesheet anda.

Gradient apa yang boleh saya cipta?

Anda boleh mencipta nilai linear-gradient dan radial-gradient, dan gradient linear menyokong sudut yang boleh dilaraskan.

Bolehkah saya menambah atau menyunting color stop?

Ya. Laraskan warna dan kedudukan, kemudian tambah atau buang color stop untuk mengemas kini pratonton dan CSS serta-merta.

Bagaimana saya menggunakan CSS yang dijana?

Output dipaparkan sebagai properti background, dan butang salin membolehkan anda menampalnya ke dalam stylesheet.