Gumawa ng Larawang Gradient
Gumawa ng tuwid o pabilog na gradient na may dalawa o tatlong kulay. Itakda ang anggulo at laki, mag-download ng gradient na background o kopyahin ang CSS para sa website.
- Tuwid at pabilog na gradient
- Pag-download ng larawan at CSS
Live na preview
1920 × 1080 pxPinaliliit ang preview para magkasya. Eksakto sa mga sukat sa pixel sa itaas ang ida-download na larawan.
background: linear-gradient(90deg, #2563eb, #e879f9);Maaaring bahagyang magkaiba ang CSS at PNG dahil magkakaiba ang paraan ng browser sa paghahalo ng mga kulay.
Paano gamitin
- Itakda ang sukat ng larawan at pumili ng tuwid o pabilog na gradient.
- Piliin ang panimulang at huling kulay, magdagdag ng gitnang kulay kung kailangan at ayusin ang anggulo ng tuwid na gradient.
- I-download ang PNG o JPEG, o kopyahin ang CSS declaration ng background.
Mga kondisyon at limitasyon
Gumagawa ito ng pandekorasyong gradient na background. Para siyasatin ang banding, gamitin ang hiwalay na gradient test. Hindi mapapatunayan ng ginawang larawan ang bit depth o katumpakan ng kulay ng display.
Mga karaniwang tanong
Ano ang ibig sabihin ng anggulo ng gradient?
Sinusunod ng mga anggulo ang tuntunin ng CSS: 0° ay mula ibaba pataas, 90° ay mula kaliwa pakanan at 180° ay mula itaas pababa. Nagsisimula sa gitna ang pabilog na gradient.
Eksakto bang tutugma ang na-download na gradient sa CSS?
Pareho ang kulay at direksiyon, ngunit maaaring magkaroon ng maliliit na pagkakaiba dahil sa paghahalo ng kulay ng browser at pag-scale ng larawan. Gamitin ang na-download na larawan kapag kailangan ng tiyak na resulta sa pixel.
Tuklasin pa
Gumawa ng tunay na transparent at blangkong PNG sa sariling sukat. Tingnan ang alpha background at mag-download ng walang lamang larawan para sa layout, overlay o disenyo.
Gumawa ng Larawang Iisang KulayGumawa ng larawang iisang kulay gamit ang sariling HEX code at eksaktong sukat. Mag-download ng PNG o JPEG para sa payak na wallpaper, background o sanggunian sa screen.
Gumawa ng Larawang PlaceholderGumawa ng pansamantalang larawan na may sukat o sariling teksto. Itakda ang kulay ng background at teksto, pumili ng eksaktong sukat at mag-download ng PNG o JPEG para sa mockup.