---
layout: page
title: Image effects
---

<div class="container markdown">
    <h2>How to use ShareX image effects?</h2>
    <ol>
        <li>Download ".sxie" file below by clicking an effect of your choice.</li>
        <li>Double click the downloaded file. It will bring image effects window and ask if you want to enable image effects. Click "Yes" button.</li>
        <li>Feel free to edit the effect if you want or close the window.</li>
    </ol>
    <p>Every time you take a screenshot, the image effect will be automatically applied to the screenshot.</p>
    <p>To disable image effects, uncheck "Add image effects" in main window "After capture tasks" menu.</p>
</div>
<div class="container-image-effects">
    <div class="container">
        <div class="row">
            {% for image-effect in site.data.image-effects reversed %}<div class="col-image-effect col-sm-6 col-lg-4">
                <div class="card image-effect">
                    <div class="image-effect-title">
                        <a class="image-effect-name" href="/image-effects/{{ image-effect.name }}.sxie">{% if image-effect.title %}{{ image-effect.title }}{% else %}{{ image-effect.name }}{% endif %}</a>
                        <span class="image-effect-author">by {{ image-effect.author }}</span>
                    </div>
                    <a href="/image-effects/{{ image-effect.name }}.sxie">
                        <img class="img-fluid" src="/img/image-effects/{{ image-effect.name }}.png" alt="{{ image-effect.title }} screenshot" />
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% include common-js.html %}
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>

<script>
    let $grid = $(".container-image-effects .row").masonry({
        percentPosition: true
    });

    $grid.imagesLoaded().progress(function() {
        $grid.masonry("layout");
    });
</script>