Skip to main content
Ask A Question
Notifications
You’re not receiving notifications from this thread.
Subscribe

Can't duplicate photoshop gradient overlay in CSS - anyone encountered that?

CSS • Asked by Limka

Hello everyone,,
So im trying to duplicate a button style from photoshop to CSS.

i tried to do it manually but fail miserably, so i tried websites that export css code from uploaded images, the issue is i still encountered the same problem - the gradient in the CSS looks nothing like the design in photoshop.
https://showbox.bio/ https://tutuapp.uno/ https://vidmate.vet/
i tried to "copy css style" in photoshop and still encountered the same problem.

in general - im lost.

im attaching a picture of the results, so if possible - help me figure it out.

wth

Thank you.

The code (sorry for the display, il fix it when i won't be on mobile)

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ffc243;
-webkit-box-shadow: 0 11px 13px rgba(1,1,1,.28);
-moz-box-shadow: 0 11px 13px rgba(1,1,1,.28);
box-shadow: 0 11px 13px rgba(1,1,1,.28);
border: solid 4px #fff;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.01), rgba(224,224,224,.14) 6%, rgba(224,224,224,.57) 25%, rgba(0,0,0,.09));
background-image: -moz-linear-gradient(top, rgba(0,0,0,.01), rgba(224,224,224,.14) 6%, rgba(224,224,224,.57) 25%, rgba(0,0,0,.09));
background-image: -o-linear-gradient(top, rgba(0,0,0,.01), rgba(224,224,224,.14) 6%, rgba(224,224,224,.57) 25%, rgba(0,0,0,.09));
background-image: -ms-linear-gradient(top, rgba(0,0,0,.01), rgba(224,224,224,.14) 6%, rgba(224,224,224,.57) 25%, rgba(0,0,0,.09));
background-image: linear-gradient(to bottom, rgba(0,0,0,.01), rgba(224,224,224,.14) 6%, rgba(224,224,224,.57) 25%, rgba(0,0,0,.09));

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 30,242+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.