htmlcsssvgclip-path

How to add a border gradient for clip path with background transparent or rgba?

How to add gradient border to clip path shape SVG + background-color: transparent or RGBA?

Add border to CSS Clip path - this variant won't work for me.

My code:

body {
  min-height: 1000px;
}

.container {
  width: 400px;
  height: 400px;
  background-color: rgba(56, 53, 75, 0.24);
  backdrop-filter: blur(3px);
  border-radius: 0.5rem;
  clip-path: url(#b-clip-path-1);
}
<div class="container">
  <svg width="0" height="0" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
    <defs>
      <!-- gradient -->
      <linearGradient id="gradient-border" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#00f" />
        <stop offset="100%" stop-color="#f00" />
      </linearGradient>

      <!-- clip path -->
      <clipPath id="b-clip-path-1" clipPathUnits="objectBoundingBox">
        <path d="M1,0 H0.1 C0.095,0 0.085,0.01 0.085,0.025 V0.57 C0.085,0.59 0.083,0.61 0.078,0.625 L0.015,0.72 C0.007,0.735 0.002,0.755 0.002,0.775 V1 C0.002,1 0.01,1 0.02,1 H1 C1,1 1,1 1,1 V0 C1,0 1,0 1,0Z" />
      </clipPath>
    </defs>

    <!-- border -->
    <path d="M0,0 H0.1 C0.095,0 0.085,0.01 0.085,0.025 V0.57 C0.085,0.59 0.083,0.61 0.078,0.625 L0.015,0.72 C0.007,0.735 0.002,0.755 0.002,0.775 V1 C0.002,1 0.01,1 0.02,1 H1 C1,1 1,1 1,1 V0 C1,0 1,0 1,0Z" fill="none" stroke="url(#gradient-border)" stroke-width="0.05" />

    <!-- inner path с clip-path -->
    <path d="M0,0 H0.1 C0.095,0 0.085,0.01 0.085,0.025 V0.57 C0.085,0.59 0.083,0.61 0.078,0.625 L0.015,0.72 C0.007,0.735 0.002,0.755 0.002,0.775 V1 C0.002,1 0.01,1 0.02,1 H1 C1,1 1,1 1,1 V0 C1,0 1,0 1,0Z" fill="#00f" clip-path="url(#b-clip-path-1)" />
  </svg>
</div>

Example of what should happen:

the image

Added gradient but it doesn't work. Any help would be appreciated.

Solution

  • Add stroke as linearGradient to your svg paths.
    This works well, here is an example:

    <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0167 125.276L16.0534 125.221L16.0743 125.158C17.0991 122.084 17.5 118.022 17.5 114V5C17.5 3.6122 17.9626 2.46256 18.5319 1.66562C18.817 1.2664 19.1229 0.964139 19.4 0.766242C19.6893 0.559569 19.8992 0.5 20 0.5H199.5V199.5H4H3.98829H3.97658H3.96488H3.9532H3.94152H3.92985H3.9182H3.90655H3.89491H3.88328H3.87166H3.86005H3.84845H3.83686H3.82528H3.81371H3.80215H3.7906H3.77906H3.76753H3.75601H3.7445H3.733H3.72151H3.71003H3.69856H3.68711H3.67566H3.66422H3.6528H3.64138H3.62998H3.61859H3.60721H3.59583H3.58447H3.57313H3.56179H3.55046H3.53915H3.52784H3.51655H3.50527H3.494H3.48274H3.47149H3.46026H3.44904H3.43782H3.42662H3.41544H3.40426H3.3931H3.38194H3.3708H3.35968H3.34856H3.33746H3.32636H3.31529H3.30422H3.29316H3.28212H3.27109H3.26008H3.24907H3.23808H3.2271H3.21614H3.20518H3.19424H3.18332H3.1724H3.1615H3.15061H3.13974H3.12888H3.11803H3.1072H3.09637H3.08557H3.07477H3.06399H3.05322H3.04247H3.03173H3.021H3.01029H2.99959H2.98891H2.97824H2.96758H2.95694H2.94631H2.9357H2.9251H2.91451H2.90394H2.89338H2.88284H2.87231H2.8618H2.8513H2.84082H2.83035H2.8199H2.80946H2.79903H2.78862H2.77823H2.76785H2.75748H2.74713H2.7368H2.72648H2.71618H2.70589H2.69562H2.68536H2.67512H2.66489H2.65468H2.64449H2.63431H2.62414H2.614H2.60387H2.59375H2.58365H2.57357H2.5635H2.55345H2.54341H2.5334H2.52339H2.51341H2.50344H2.49349H2.48355H2.47363H2.46373H2.45384H2.44397H2.43412H2.42428H2.41446H2.40466H2.39488H2.38511H2.37536H2.36563H2.35591H2.34621H2.33653H2.32687H2.31722H2.30759H2.29798H2.28838H2.27881H2.26925H2.25971H2.25019H2.24068H2.2312H2.22173H2.21228H2.20284H2.19343H2.18403H2.17465H2.16529H2.15595H2.14663H2.13733H2.12804H2.11877H2.10952H2.10029H2.09108H2.08189H2.07272H2.06356H2.05443H2.04531H2.03621H2.02713H2.01807H2.00904H2.00001H1.99101H1.98203H1.97307H1.96413H1.9552H1.9463H1.93741H1.92855H1.91971H1.91088H1.90208H1.89329H1.88453H1.87578H1.86706H1.85835H1.84967H1.841H1.83236H1.82374H1.81513H1.80655H1.79799H1.78945H1.78093H1.77243H1.76395H1.75549H1.74705H1.73863H1.73024H1.72186H1.71351H1.70518H1.69686H1.68857H1.6803H1.67206H1.66383H1.65563H1.64744H1.63928H1.63114H1.62302H1.61492H1.60685H1.5988H1.59077H1.58276H1.57477H1.5668H1.55886H1.55094H1.54304H1.53516H1.52731H1.51948H1.51167H1.50388H1.49611H1.48837H1.48065H1.47295H1.46528H1.45763H1.45H1.44239H1.43481H1.42725H1.41971H1.4122H1.40471H1.39724H1.3898H1.38238H1.37498H1.36761H1.36026H1.35293H1.34563H1.33835H1.33109H1.32386H1.31665H1.30947H1.30231H1.29517H1.28806H1.28097H1.2739H1.26686H1.25985H1.25285H1.24589H1.23894H1.23203H1.22513H1.21826H1.21142H1.2046H1.1978H1.19103H1.18428H1.17756H1.17087H1.1642H1.15755H1.15093H1.14433H1.13776H1.13122H1.1247H1.1182H1.11173H1.10529H1.09887H1.09248H1.08611H1.07977H1.07345H1.06716H1.0609H1.05466H1.04845H1.04226H1.0361H1.02996H1.02386H1.01777H1.01172H1.00569H0.999686H0.99371H0.98776H0.981836H0.97594H0.970069H0.964226H0.958409H0.952619H0.946856H0.94112H0.93541H0.929728H0.924073H0.918445H0.912844H0.90727H0.901724H0.9V155C0.9 151.085 1.87811 147.176 3.43005 144.256L16.0167 125.276Z" fill="#0000FF" fill-opacity="0.1" stroke="url(#paint0_linear_2046_4)"/>
<defs>
<linearGradient id="paint0_linear_2046_4" x1="100" y1="0" x2="100" y2="200" gradientUnits="userSpaceOnUse">
<stop stop-color="#0000FF"/>
<stop offset="1" stop-color="#FF0000"/>
</linearGradient>
</defs>
</svg>