Фрее Цонвертер

ЦСС Градиент Генератор

Визуелно генеришите ЦСС градијенте уз преглед уживо. Креирајте линеарне, радијалне и конусне градијенте са прилагођеним заустављањима боја — бесплатно и на страни клијента.

Преглед уживо
ЦСС излаз
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Угао (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

О овом алату

Направите прелепе ЦСС линеарне и радијалне градијенте помоћу визуелног уређивача. Изаберите боје, подесите заустављања, промените правац или угао и погледајте ажурирање прегледа уживо у реалном времену. Копирајте генерисани ЦСС код — укључујући префиксе добављача за старије прегледаче — и налепите га директно у своју листу стилова.

Како користити

  1. Изаберите тип градијента: линеарни или радијални.
  2. Додајте заустављање боја тако што ћете кликнути на траку градијента и изабрати боје.
  3. Подесите угао градијента (линеарно) или позицију (радијално) помоћу контрола.
  4. Копирајте генерисани ЦСС код са излазног панела.

Често постављана питања

Да ли ЦСС градијенти раде у свим претраживачима?
Модерни ЦСС градијенти (линеарни градијент, радијални градијент) су подржани у свим тренутним претраживачима укључујући Цхроме, Фирефок, Сафари и Едге. Алат може опционо да генерише -вебкит- префиксе за старије верзије претраживача.
Могу ли да креирам вишебојне градијенте?
Да. Додајте онолико боја колико вам је потребно. Такође можете подесити позицију сваког заустављања да бисте контролисали где се боје мешају. Ово омогућава сложене нагибе дуге, заласка сунца или прилагођених брендова.
Која је разлика између линеарног и радијалног градијента?
Линеарни градијенти прелазе боје дуж праве линије (од врха ка дну, са лева надесно, дијагонално или под било којим углом). Радијални градијенти прелазе боје ка споља од централне тачке у кружном или елиптичном облику.
Да ли могу да користим градијент као позадину за текст?
Да. Користите бацкгроунд-цлип: тект са -вебкит-тект-филл-цолор: транспарентно да примените градијент на текст. Генерисани ЦСС обезбеђује дефиницију градијента — комбинујте је са овим својствима за градијент текст.