'%3e%3cg%20filter='url(%23filter0_f_569_681)'%3e%3ccircle%20cx='10'%20cy='9.99994'%20r='18'%20fill='%23FD0000'/%3e%3c/g%3e%3cg%20filter='url(%23filter1_f_569_681)'%3e%3ccircle%20cx='41'%20cy='13'%20r='23'%20fill='%2300D701'/%3e%3c/g%3e%3cg%20filter='url(%23filter2_f_569_681)'%3e%3cellipse%20cx='16'%20cy='39.9999'%20rx='22'%20ry='18'%20fill='%230000FF'/%3e%3c/g%3e%3cpath%20d='M18.646%2030.1047C18.9274%2029.9315%2019.0983%2029.625%2019.0983%2029.2949V18.8092L27.7718%2014.4365C28.0922%2014.2749%2028.2947%2013.9462%2028.2947%2013.5873C28.2947%2013.2283%2028.0922%2012.8996%2027.7718%2012.738L18.5754%208.10175C18.3061%207.96617%2017.9885%207.96617%2017.7192%208.10175L8.52283%2012.738C8.22364%2012.8899%208%2013.2318%208%2013.5873V24.6581C8%2025.0171%208.20245%2025.3458%208.52283%2025.5074L17.7192%2030.1441C18.0138%2030.2924%2018.3647%2030.2779%2018.646%2030.1047ZM18.1473%2010.0162L25.2311%2013.5873L18.1473%2017.1584L11.0636%2013.5873L18.1473%2010.0162ZM9.90187%2024.0726V15.1317L17.1964%2018.8092V27.7505L9.90187%2024.0726Z'%20fill='white'/%3e%3cpath%20d='M31.0156%2026.5504L21.8115%2031.2535V20.8141L31.0156%2016.111V26.5504Z'%20stroke='white'%20stroke-width='1.96873'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_569_681'%20x='-24'%20y='-24.0001'%20width='68'%20height='68'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='8'%20result='effect1_foregroundBlur_569_681'/%3e%3c/filter%3e%3cfilter%20id='filter1_f_569_681'%20x='2'%20y='-26'%20width='78'%20height='78'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='8'%20result='effect1_foregroundBlur_569_681'/%3e%3c/filter%3e%3cfilter%20id='filter2_f_569_681'%20x='-22'%20y='5.99994'%20width='76'%20height='68'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='8'%20result='effect1_foregroundBlur_569_681'/%3e%3c/filter%3e%3cclipPath%20id='clip0_569_681'%3e%3crect%20width='40'%20height='40'%20rx='10'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=avatar}
Генератор градиентов
Создание CSS-градиентов: линейный, радиальный и конический. Настройка точек остановки, угла и пресеты.
Угол: 90°
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
background-image
linear-gradient(90deg, #6366f1 0%, #ec4899 100%)
React style
style={{ background: `linear-gradient(90deg, #6366f1 0%, #ec4899 100%)` }}