<p><span class="first-letter">T</span>he <code>-webkit-box-reflect</code> CSS property lets you reflect the content of an element in one specific direction.</p>

<p>We can create the reflections using the box-reflect property.</p>
<pre><code class="lang-css"><span class="hljs-comment">/* Direction values */</span>
<span class="hljs-selector-tag">-webkit-box-reflect</span>: <span class="hljs-selector-tag">above</span> / <span class="hljs-selector-tag">below</span> / <span class="hljs-selector-tag">left</span> /  <span class="hljs-selector-tag">right</span>;

<span class="hljs-comment">/* can also add offset value */</span>
<span class="hljs-selector-tag">-webkit-box-reflect</span>: <span class="hljs-selector-tag">below</span> 10<span class="hljs-selector-tag">px</span>;

<span class="hljs-comment">/* even add gradient */</span>
<span class="hljs-selector-tag">-webkit-box-reflect</span>: <span class="hljs-selector-tag">below</span> 0 <span class="hljs-selector-tag">linear-gradient</span>(<span class="hljs-selector-tag">transparent</span>, <span class="hljs-selector-tag">white</span>);
</code></pre>
<h4 id="example">Example</h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/2fea277d-540b-42af-b152-782940dc49ef/de4cpd0-caed317f-b05d-4852-acb8-3ce25b38d873.png"</span> /&gt;</span>
</code></pre>
<pre><code class="lang-css"><span class="hljs-selector-tag">img</span> {
  <span class="hljs-attribute">-webkit-box-reflect</span>: right;
}
</code></pre>
<p>Output:
<img src="https://i.imgur.com/83fatFf.png" alt="css box reflect" /></p>
<p>Checkout the codepen here:</p>
<iframe height="465" style="width:100%" src="https://codepen.io/suprabhasupi/embed/gOmdqPg?height=265&amp;theme-id=dark&amp;default-tab=html,result">
  See the Pen <a href="https://codepen.io/suprabhasupi/pen/gOmdqPg">CSS Box Reflect</a> by suprabha
  (<a href="https://codepen.io/suprabhasupi">@suprabhasupi</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>

<h2 id="browser-support">Browser Support 🌐</h2>
<p>Box-reflect doesn't have the best support, but it's upcoming. So far, Firefox and IE have no support at all.</p>
<p><img src="https://i.imgur.com/H1nPSDt.png" alt="css box reflect support" /></p>
<h2 id="reference">Reference 🧐</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect">MDN Box Reflect</a></li>
<li><a href="https://caniuse.com/?search=-webkit-box-reflect">Can I Use box-reflect</a></li>
</ul>
<p><a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a></p>
<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>



<p><span class='first-letter'>T</span>he `-webkit-box-reflect` CSS property lets you reflect the content of an element in one specific direction.</p>

We can create the reflections using the box-reflect property.

```css
/* Direction values */
-webkit-box-reflect: above / below / left /  right;

/* can also add offset value */
-webkit-box-reflect: below 10px;

/* even add gradient */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
```

#### Example

```html
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/2fea277d-540b-42af-b152-782940dc49ef/de4cpd0-caed317f-b05d-4852-acb8-3ce25b38d873.png" />
```

```css
img {
  -webkit-box-reflect: right;
}
```

<u>Output:</u>
<img src="https://i.imgur.com/83fatFf.png" alt="css box reflect" />

Checkout the codepen here:

<iframe height="465" style="width: 100%;" scrolling="no" title="CSS Box Reflect" src="https://codepen.io/suprabhasupi/embed/gOmdqPg?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/suprabhasupi/pen/gOmdqPg'>CSS Box Reflect</a> by suprabha
  (<a href='https://codepen.io/suprabhasupi'>@suprabhasupi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Browser Support 🌐

Box-reflect doesn't have the best support, but it's upcoming. So far, Firefox and IE have no support at all.

<img src="https://i.imgur.com/H1nPSDt.png" alt="css box reflect support" />

## Reference 🧐

- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect">MDN Box Reflect</a>
- <a href="https://caniuse.com/?search=-webkit-box-reflect">Can I Use box-reflect</a>

<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>



CSS webkit-box-reflect

CSS Box Reflect

I really love to tweet or post article on HTML, CSS, JS, ThreeJS, React.
My goal is to encourage more people to get into tech 🔥


Suprabha's Blog

Suprabha's Blog

CSS Box Reflect

Example

Browser Support 🌐

Reference 🧐