DevTulz Online

Генератор CSS градијената

Тачке заустављања боје

Шта је CSS градијент?

CSS градијенти омогућавају приказивање глатких прелаза између две или више боја без употребе сликовних датотека. Постоје три врсте: linear-gradient (дуж праве линије), radial-gradient (зрачи из централне тачке) и conic-gradient (окреће се oko централне тачке). Градијенти се користе за позадине, дугмад, преклопне слојеве и декоративне елементе.

Kako користити генератор CSS градијената

  1. Одаберите унапред постављену вредност из узорака или конфигуришите сопствени градијент.

  2. Одаберите врсту градијента: linear, radial или conic.

  3. Подесите угао (за linear/conic) или облик (за radial).

  4. Уредите тачке заустављања боје — мењајте боје и положаје (0–100%).

  5. По потреби додајте или уклоните тачке заустављања боје.

  6. Копирајте CSS и налепите га у свој стилски лист.

Često Postavljana Pitanja

Kako da napravim transparentni gradijent? Koristite rgba() ili hsla() vrednosti boje sa alfa kanalom od 0 za punu transparentnost. Na primer, boja zaustavke rgba(0,0,0,0) je potpuno transparentna crna, korisna za postepene preklapače na slikama.

Kako da napravim tvrdu boju zaustavke (bez prelaska)? Postavite dve boje zaustavke na istu poziciju — jednu koja se završava i jednu koja počinje u toj tački. Na primer, crvena 50%, plava 50% pravi trenutni prelazak sa crvene na plavu na sredini bez gradijentnog prelaska.

Koji pregledači podržavaju konične gradijente? Konični gradienti su podržani u svim modernim pregledačima (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Nisu podržani u Internet Exploreru.

Mogu li koristiti više gradijenta na istom elementu? Da. CSS background prihvaća zarezi odvojenu listu slojeva. Možete slažiti gradijente, kombinovati ih sa fonom slike i nezavisno kontrolisati poziciju i veličinu svakog sloja.

Keywords: генератор CSS градијента, линеарни градијент, радијални градијент, конични градијент, генератор CSS позадине, бирач боје градијента, алат за CSS градијент