Как добиться такого же фона ( как у свг)?

Question

[vlados096zver]

но на чистом css
https://jsbin.com/kowabegasa/edit?html,css,output

<svg xmlns="http://www.w3.org/2000/svg" width="369" height="76" viewBox="0 0 369 76" fill="none">
<foreignObject x="-17" y="-17" width="403" height="110"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_40006304_15281_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_ddi_40006304_15281)" data-figma-bg-blur-radius="30">
<rect x="13" y="13" width="343" height="50" rx="12" fill="url(#paint0_linear_40006304_15281)"/>
<rect x="13.5" y="13.5" width="342" height="49" rx="11.5" stroke="#FFAB01"/>
<rect x="13.5" y="13.5" width="342" height="49" rx="11.5" stroke="url(#paint1_linear_40006304_15281)"/>
</g>
<defs>
<filter id="filter0_ddi_40006304_15281" x="-17" y="-17" width="403" height="110" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_40006304_15281"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.670588 0 0 0 0 0.00392157 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40006304_15281"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.670588 0 0 0 0 0.00392157 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_40006304_15281" result="effect2_dropShadow_40006304_15281"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_40006304_15281" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.8 0 0 0 0 0.266667 0 0 0 0.35 0"/>
<feBlend mode="normal" in2="shape" result="effect3_innerShadow_40006304_15281"/>
</filter>
<clipPath id="bgblur_0_40006304_15281_clip_path" transform="translate(17 17)"><rect x="13" y="13" width="343" height="50" rx="12"/>
</clipPath><linearGradient id="paint0_linear_40006304_15281" x1="13" y1="13" x2="27.2739" y2="110.919" gradientUnits="userSpaceOnUse">
<stop stop-color="#3B2700" stop-opacity="0.65"/>
<stop offset="1" stop-opacity="0.85"/>
</linearGradient>
<linearGradient id="paint1_linear_40006304_15281" x1="13" y1="13" x2="25.7377" y2="107.511" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.65"/>
<stop offset="0.3" stop-color="white" stop-opacity="0.1"/>
<stop offset="0.697115" stop-color="white" stop-opacity="0.1"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
</defs>
</svg>

Comments

[Антон Антон]

зачем мучаться, когда можно просто тот svg заинлайнить, и даже с динамическими размерами не портить stroke через https://developer.mozilla.org/en-US/docs/Web/SVG/R... (а если там fill, то можно jsом при начальном рендеринге и ресайзе менять нужные числа)

Answer 1

[Пума Тайланд]

Один background не сделает, в SVG это стопка из градиента, backdrop-filter и рамки:

.card{
  border-radius:12px;
  background:linear-gradient(172deg,rgba(59,39,0,.65),rgba(0,0,0,.85));
  backdrop-filter:blur(15px);
  box-shadow:0 0 12px 1px rgba(255,171,1,.3),inset 0 6px 10px rgba(255,204,68,.35);
  position:relative;
}
.card::before{
  content:"";
  position:absolute;inset:-1px;padding:1px;border-radius:inherit;
  background:linear-gradient(172deg,rgba(255,171,1,.6),rgba(255,171,1,.07) 30% 70%,#ffab01);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}

Обычным border градиент не залить, рамка через ::before и mask-composite. Blur заметен только если под блоком что-то пёстрое.