Эскиз в CSS — проблема экспорта радиального градиента в CSS

Мой английский немного плохой. Извиняюсь. Имеется эскиз, подготовленный в программе Sketch. Я не мог правильно передать радиальный градиент в код CSS. Как получить такой же радиальный градиент?

Скриншоты: https://imgur.com/1XNWNtv - https://imgur.com/lTljQBr

Высота радиального градиента: 1000 пикселей

Цвет радиального градиента: #3F46AD (непрозрачность 10%)

Примечание. Функция "Копировать атрибуты CSS (эскиз)" экспортировалась некорректно;

HTML:

<div class="gradient-bg-wrapper">

</div>

<div class="text-wrapper">
    test test test
</div>

CSS:

.gradient-bg-wrapper{
    height: 1000px;
    background-image: radial-gradient(50% 124%, #3F46AD 75%, #FFFFFF 100%);
    opacity: 0.1;
 }

css sass styles sketchapp sketch-3
person Gökhan    schedule 25.01.2019    source источник
comment
вы можете найти все, что вам нужно, проверив DOC: developer. mozilla.org/en-US/docs/Web/CSS/radial-gradient и спецификация: drafts.csswg.org/css-images-3/#radial-gradients   -  person Temani Afif    schedule 25.01.2019
comment
@TemaniAfif Прежде всего спасибо. Я много пробовал. Но я не получил такой же экспорт. :(   -  person Gökhan    schedule 25.01.2019
comment
Имея ту же проблему   -  person Steven    schedule 17.05.2019
comment
Возникла та же проблема. Радиальный градиент не совпадает при экспорте в виде CSS.   -  person uNki    schedule 12.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй это:

.gradient-bg-wrapper{
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(63,70,173,0.1) 0%,rgba(255,255,255,0.1) 100%);
 }
<div class="gradient-bg-wrapper">
</div>

<div class="text-wrapper">
    test test test
</div>

person Minal Chauhan    schedule 30.12.2020