Transparancy on image not working together well with box-shadow











up vote
0
down vote

favorite












So I've been trying to add a shadow to my images and I've been encountering some issue.
The images used are PNG of cut out products but they have a round border so there's still some transparent corners as seen here:



This is my image in Photoshop:



Image in Photoshop



Now if I add them on my site and put a box-shadow on top of them this is the result:



Image on website



There's this white-grayish corners that look pretty bad. Is there any workaround for this?



Thanks in advance.










share|improve this question




























    up vote
    0
    down vote

    favorite












    So I've been trying to add a shadow to my images and I've been encountering some issue.
    The images used are PNG of cut out products but they have a round border so there's still some transparent corners as seen here:



    This is my image in Photoshop:



    Image in Photoshop



    Now if I add them on my site and put a box-shadow on top of them this is the result:



    Image on website



    There's this white-grayish corners that look pretty bad. Is there any workaround for this?



    Thanks in advance.










    share|improve this question


























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      So I've been trying to add a shadow to my images and I've been encountering some issue.
      The images used are PNG of cut out products but they have a round border so there's still some transparent corners as seen here:



      This is my image in Photoshop:



      Image in Photoshop



      Now if I add them on my site and put a box-shadow on top of them this is the result:



      Image on website



      There's this white-grayish corners that look pretty bad. Is there any workaround for this?



      Thanks in advance.










      share|improve this question















      So I've been trying to add a shadow to my images and I've been encountering some issue.
      The images used are PNG of cut out products but they have a round border so there's still some transparent corners as seen here:



      This is my image in Photoshop:



      Image in Photoshop



      Now if I add them on my site and put a box-shadow on top of them this is the result:



      Image on website



      There's this white-grayish corners that look pretty bad. Is there any workaround for this?



      Thanks in advance.







      css web photoshop shadow






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 2 days ago









      kit

      346113




      346113










      asked 2 days ago









      Lorenz Klein

      1




      1
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote













          The problem is the image itself, not the shadows, that white-grayish corners are part of the image and you can't do nothing with css to fix it, what you need to do is import your image again from photoshop without that corners.






          share|improve this answer








          New contributor




          MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.


















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239307%2ftransparancy-on-image-not-working-together-well-with-box-shadow%23new-answer', 'question_page');
            }
            );

            Post as a guest
































            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            1
            down vote













            The problem is the image itself, not the shadows, that white-grayish corners are part of the image and you can't do nothing with css to fix it, what you need to do is import your image again from photoshop without that corners.






            share|improve this answer








            New contributor




            MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
            Check out our Code of Conduct.






















              up vote
              1
              down vote













              The problem is the image itself, not the shadows, that white-grayish corners are part of the image and you can't do nothing with css to fix it, what you need to do is import your image again from photoshop without that corners.






              share|improve this answer








              New contributor




              MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
              Check out our Code of Conduct.




















                up vote
                1
                down vote










                up vote
                1
                down vote









                The problem is the image itself, not the shadows, that white-grayish corners are part of the image and you can't do nothing with css to fix it, what you need to do is import your image again from photoshop without that corners.






                share|improve this answer








                New contributor




                MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                The problem is the image itself, not the shadows, that white-grayish corners are part of the image and you can't do nothing with css to fix it, what you need to do is import your image again from photoshop without that corners.







                share|improve this answer








                New contributor




                MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                share|improve this answer



                share|improve this answer






                New contributor




                MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                answered 2 days ago









                MartinBA

                3559




                3559




                New contributor




                MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.





                New contributor





                MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.






                MartinBA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239307%2ftransparancy-on-image-not-working-together-well-with-box-shadow%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest




















































































                    Popular posts from this blog

                    Bressuire

                    Vorschmack

                    Quarantine