Как повторить фильтр с фигмы?

Question

[vlados096zver]

Фигма выдает

/* Ellipse 255 */
position: static;
width: 70px;
height: 70px;
/* Inside Auto Layout */
flex: none;
order: undefined;
flex-grow: 0;
margin: 8px 0px;
filter: blur(120px);
background: rgb(255, 218, 82);

текущий код https://jsbin.com/payarayohi/2/edit?html,css,output

Comments

[Ankhena]

Открываете инструменты разработчика. Вкладка Styles. Находите нужное свойство. Кликаете мышкой по значению, стрелками с клавиатуры увеличиваете или уменьшаете значение.
До тех пор, пока не понравится.

[xdevelx]

При чём тут фильтр? Ищите слой с градиентом.

[vlados096zver]

xdevelx, фигма выдает свг с фильтром

<svg xmlns="http://www.w3.org/2000/svg" width="310" height="310" viewBox="0 0 310 310" fill="none">
<g filter="url(#filter0_f_151_23680)">
<circle cx="155" cy="155" r="35" fill="#FFDA52"/>
</g>
<defs>
<filter id="filter0_f_151_23680" x="0" y="0" width="310" height="310" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_151_23680"/>
</filter>
</defs>
</svg>

[Ankhena]

vlados096zver, часто такие картинки дешевле экспортировать как png, даже с учетом разной плотности и т.д., чем блюрить.
Но окончательное решение, конечно, зависит от ТЗ и того что в макете.

[ImagineTables]

Выглядит как простой радиальный градиент (делается при помощи одного свойства background). Если же по замыслу нечто большее (с блюром), то взять чёрный фон для примера — не самая удачная идея.

P.S. Можно сократить flex-свойства. Если flex: none;, то и flex-grow: 0; не нужен.