title: How to create a rounded semi-transparent mask
body: <p>Is there a way to create a semi-transparent mask with a "fuzzy" outline and a rounded corner without using various dummy elements to position that mask? This example shows the idea with 3 dummy elements.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    padding: 0;
    margin: 0;
  }
  
  body {
    background: url(https://unsplash.it/1000/1000) no-repeat;
    padding: 0;
    margin: 0;
  }
  
  .outer {
    max-width: 20rem;
    position: relative;
  }
  
  .inner {
    color: white;
    position: relative;
    z-index: 9999;
  }
  
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 6rem;
    right: 0;
    background: rgba(0, 0, 0, .1);
  }
  
  .mask .bottom {
    position: absolute;
    bottom: -10rem;
    height: 10rem;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 100%);
  }
  
  .mask .right {
    position: absolute;
    right: -4rem;
    width: 4rem;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 100%);
  }
  
  .mask .bottom-right {
    position: absolute;
    right: -4rem;
    bottom: -10rem;
    width: 4rem;
    height: 10rem;
    /* 1 / sqrt(2) */
    background: radial-gradient(ellipse at 0 0, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 70.71%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="mask"&gt;
      &lt;div class="bottom"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
      &lt;div class="bottom-right"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="inner"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id pharetra nulla. Mauris ultricies aliquam augue, tristique convallis turpis pulvinar tincidunt. Curabitur pretium sollicitudin imperdiet. Maecenas venenatis dignissim dolor vitae tempor.
      Morbi non posuere ipsum. Vivamus vel tincidunt magna. Cras dictum lacinia massa, vel malesuada lacus sollicitudin eget.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried using border-image, but found that the right border looks odd, and that I can only use a linear gradient to color it which limits my options a lot. It does also clash with background-color and does not work with border-radius.</p>
  
  <p>I also tried to make a composite gradient, but it seems like you can only define a starting position and an angle (for linear gradients). This would make the gradients overlap, which I could work with if the borders wouldn't always be transparent and make it impossible to use the technique of completely filling an area with a color before defining an overlapping gradient.</p>
  
  <p>Is there are a smarter way of accomplishing this with, for example, pseudo elements?</p>