CSS - линейный градиент не работает ни в одном браузере

Question

У меня есть class как:

.breadcrumb_area {
  background-image: -moz-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  background-image: -webkit-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  background-image: -ms-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  position: relative;
  z-index: 1;
  padding: 235px 0px 125px;
  overflow: hidden;
}

Теперь я использую предопределенный HTML-шаблон CSS. Этот класс отлично работает на страницах шаблонов. Но тот же класс, когда я использую на странице react, он не работает.

В инструментах разработчика Chrome пробита линия background-image.

<section className="breadcrumb_area">
        <img className="breadcrumb_shap" src={`${banner_bg}`} alt="" />
        <div className="container">
            <div className="breadcrumb_content text-center">
                <h1 className="f_p f_700 f_size_50 w_color l_height50 mb_20">Services</h1>
                <p className="f_300 w_color f_size_16 l_height26">
                  Why I say old chap that is spiffing off his nut arse pear shaped plastered<br/> 
                  Jeffrey bodge barney some dodgy.!!
                </p>
            </div>
        </div>
    </section>

То же самое работает и здесь

Как использовать линейный градиент для всех браузеров?

Answer 1

.breadcrumb_area {
  background-image: linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
  position: relative;
  z-index: 1;
  padding: 235px 0px 125px;
  overflow: hidden;
}

и для сборки я добавил авторефиксер в конфигурации babel или webpack

это работает для меня