How to make a rounded drop shadow on a png image
up vote
2
down vote
favorite
I am trying to recreate a website template I found on Behance. While I found a great solution and learned something new with filter: dropshadow(); I would really like to just make the drop-shadow on my png rounded. I tried border-radius changes but to no attest maybe blur() but that blurs the image, and I hoped you could do something like drop-shadow(blur()); which would be cheeky.
Here is the codepen an image for clarity below and the code. Thanks.
.weapon-1{
background: url(../pictor/pistols/360fx360f.png) center center no-repeat;
background-size: contain;
width: 100px;
height: 100px;
-moz-filter: drop-shadow(0 0 10px #B3135D);
-webkit-filter: drop-shadow(0 0 10px #B3135D);
filter: drop-shadow(0 0 10px #B3135D);
}
css filter dropshadow
asked Nov 10 at 12:50
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
2
down vote
favorite
I am trying to recreate a website template I found on Behance. While I found a great solution and learned something new with filter: dropshadow(); I would really like to just make the drop-shadow on my png rounded. I tried border-radius changes but to no attest maybe blur() but that blurs the image, and I hoped you could do something like drop-shadow(blur()); which would be cheeky.
Here is the codepen an image for clarity below and the code. Thanks.
.weapon-1{
background: url(../pictor/pistols/360fx360f.png) center center no-repeat;
background-size: contain;
width: 100px;
height: 100px;
-moz-filter: drop-shadow(0 0 10px #B3135D);
-webkit-filter: drop-shadow(0 0 10px #B3135D);
filter: drop-shadow(0 0 10px #B3135D);
}
css filter dropshadow
asked Nov 10 at 12:50
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I am trying to recreate a website template I found on Behance. While I found a great solution and learned something new with filter: dropshadow(); I would really like to just make the drop-shadow on my png rounded. I tried border-radius changes but to no attest maybe blur() but that blurs the image, and I hoped you could do something like drop-shadow(blur()); which would be cheeky.
Here is the codepen an image for clarity below and the code. Thanks.
.weapon-1{
background: url(../pictor/pistols/360fx360f.png) center center no-repeat;
background-size: contain;
width: 100px;
height: 100px;
-moz-filter: drop-shadow(0 0 10px #B3135D);
-webkit-filter: drop-shadow(0 0 10px #B3135D);
filter: drop-shadow(0 0 10px #B3135D);
}
css filter dropshadow
asked Nov 10 at 12:50
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I am trying to recreate a website template I found on Behance. While I found a great solution and learned something new with filter: dropshadow(); I would really like to just make the drop-shadow on my png rounded. I tried border-radius changes but to no attest maybe blur() but that blurs the image, and I hoped you could do something like drop-shadow(blur()); which would be cheeky.
Here is the codepen an image for clarity below and the code. Thanks.
.weapon-1{
background: url(../pictor/pistols/360fx360f.png) center center no-repeat;
background-size: contain;
width: 100px;
height: 100px;
-moz-filter: drop-shadow(0 0 10px #B3135D);
-webkit-filter: drop-shadow(0 0 10px #B3135D);
filter: drop-shadow(0 0 10px #B3135D);
}
css filter dropshadow
css filter dropshadow
asked Nov 10 at 12:50
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Nov 10 at 12:50
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited Nov 10 at 13:02
asked Nov 10 at 12:50
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Nov 10 at 12:50
Stegnat Sum
354
asked Nov 10 at 12:50
Stegnat Sum
354
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
for rounded drop shadow you can use radial-gradient in background with transparent image.
original image used in snippet is original image
Please refer snippet.
body{background-color: black}
img {
/* For browsers that do not support gradients */
background-image: radial-gradient(circle, white, black, black);
padding: 50px;
}<body>
<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>answered Nov 10 at 14:47
WC2
1007
Legit, I straight glanced over radial gradient. Still this question could help someone else as well. Thanks!
– Stegnat Sum
Nov 10 at 19:01
@StegnatSum ok...then please accept this answer. To help others in finding this as solution
– WC2
2 days ago
add a comment |
up vote
0
down vote
You can also combine elements for a really unique effect especially with compound colors. Here I am using a blue and a purple.
.weapon-1{
background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat, radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
background-size: contain;
width: 200px;
height: 200px;
-moz-filter: drop-shadow(0 0 10px #2C18AF);
-webkit-filter: drop-shadow(0 0 10px #2C18AF);
filter: drop-shadow(0 0 10px #2C18AF);
}<div class="weapon weapon-1 mx-2"></div>answered Nov 10 at 20:17
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
for rounded drop shadow you can use radial-gradient in background with transparent image.
original image used in snippet is original image
Please refer snippet.
body{background-color: black}
img {
/* For browsers that do not support gradients */
background-image: radial-gradient(circle, white, black, black);
padding: 50px;
}<body>
<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>answered Nov 10 at 14:47
WC2
1007
Legit, I straight glanced over radial gradient. Still this question could help someone else as well. Thanks!
– Stegnat Sum
Nov 10 at 19:01
@StegnatSum ok...then please accept this answer. To help others in finding this as solution
– WC2
2 days ago
add a comment |
up vote
1
down vote
accepted
for rounded drop shadow you can use radial-gradient in background with transparent image.
original image used in snippet is original image
Please refer snippet.
body{background-color: black}
img {
/* For browsers that do not support gradients */
background-image: radial-gradient(circle, white, black, black);
padding: 50px;
}<body>
<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>answered Nov 10 at 14:47
WC2
1007
Legit, I straight glanced over radial gradient. Still this question could help someone else as well. Thanks!
– Stegnat Sum
Nov 10 at 19:01
@StegnatSum ok...then please accept this answer. To help others in finding this as solution
– WC2
2 days ago
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
for rounded drop shadow you can use radial-gradient in background with transparent image.
original image used in snippet is original image
Please refer snippet.
body{background-color: black}
img {
/* For browsers that do not support gradients */
background-image: radial-gradient(circle, white, black, black);
padding: 50px;
}<body>
<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>answered Nov 10 at 14:47
WC2
1007
for rounded drop shadow you can use radial-gradient in background with transparent image.
original image used in snippet is original image
Please refer snippet.
body{background-color: black}
img {
/* For browsers that do not support gradients */
background-image: radial-gradient(circle, white, black, black);
padding: 50px;
}<body>
<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>body{background-color: black}
img {
/* For browsers that do not support gradients */
background-image: radial-gradient(circle, white, black, black);
padding: 50px;
}<body>
<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>body{background-color: black}
img {
/* For browsers that do not support gradients */
background-image: radial-gradient(circle, white, black, black);
padding: 50px;
}<body>
<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>answered Nov 10 at 14:47
WC2
1007
edited Nov 10 at 15:35
answered Nov 10 at 14:47
WC2
1007
answered Nov 10 at 14:47
WC2
1007
answered Nov 10 at 14:47
WC2
1007
1007
Legit, I straight glanced over radial gradient. Still this question could help someone else as well. Thanks!
– Stegnat Sum
Nov 10 at 19:01
@StegnatSum ok...then please accept this answer. To help others in finding this as solution
– WC2
2 days ago
add a comment |
Legit, I straight glanced over radial gradient. Still this question could help someone else as well. Thanks!
– Stegnat Sum
Nov 10 at 19:01
@StegnatSum ok...then please accept this answer. To help others in finding this as solution
– WC2
2 days ago
Legit, I straight glanced over radial gradient. Still this question could help someone else as well. Thanks!
– Stegnat Sum
Nov 10 at 19:01
Legit, I straight glanced over radial gradient. Still this question could help someone else as well. Thanks!
– Stegnat Sum
Nov 10 at 19:01
@StegnatSum ok...then please accept this answer. To help others in finding this as solution
– WC2
2 days ago
@StegnatSum ok...then please accept this answer. To help others in finding this as solution
– WC2
2 days ago
add a comment |
up vote
0
down vote
You can also combine elements for a really unique effect especially with compound colors. Here I am using a blue and a purple.
.weapon-1{
background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat, radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
background-size: contain;
width: 200px;
height: 200px;
-moz-filter: drop-shadow(0 0 10px #2C18AF);
-webkit-filter: drop-shadow(0 0 10px #2C18AF);
filter: drop-shadow(0 0 10px #2C18AF);
}<div class="weapon weapon-1 mx-2"></div>answered Nov 10 at 20:17
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
You can also combine elements for a really unique effect especially with compound colors. Here I am using a blue and a purple.
.weapon-1{
background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat, radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
background-size: contain;
width: 200px;
height: 200px;
-moz-filter: drop-shadow(0 0 10px #2C18AF);
-webkit-filter: drop-shadow(0 0 10px #2C18AF);
filter: drop-shadow(0 0 10px #2C18AF);
}<div class="weapon weapon-1 mx-2"></div>answered Nov 10 at 20:17
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
up vote
0
down vote
You can also combine elements for a really unique effect especially with compound colors. Here I am using a blue and a purple.
.weapon-1{
background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat, radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
background-size: contain;
width: 200px;
height: 200px;
-moz-filter: drop-shadow(0 0 10px #2C18AF);
-webkit-filter: drop-shadow(0 0 10px #2C18AF);
filter: drop-shadow(0 0 10px #2C18AF);
}<div class="weapon weapon-1 mx-2"></div>answered Nov 10 at 20:17
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can also combine elements for a really unique effect especially with compound colors. Here I am using a blue and a purple.
.weapon-1{
background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat, radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
background-size: contain;
width: 200px;
height: 200px;
-moz-filter: drop-shadow(0 0 10px #2C18AF);
-webkit-filter: drop-shadow(0 0 10px #2C18AF);
filter: drop-shadow(0 0 10px #2C18AF);
}<div class="weapon weapon-1 mx-2"></div>.weapon-1{
background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat, radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
background-size: contain;
width: 200px;
height: 200px;
-moz-filter: drop-shadow(0 0 10px #2C18AF);
-webkit-filter: drop-shadow(0 0 10px #2C18AF);
filter: drop-shadow(0 0 10px #2C18AF);
}<div class="weapon weapon-1 mx-2"></div>.weapon-1{
background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat, radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
background-size: contain;
width: 200px;
height: 200px;
-moz-filter: drop-shadow(0 0 10px #2C18AF);
-webkit-filter: drop-shadow(0 0 10px #2C18AF);
filter: drop-shadow(0 0 10px #2C18AF);
}<div class="weapon weapon-1 mx-2"></div>answered Nov 10 at 20:17
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 10 at 20:17
Stegnat Sum
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 10 at 20:17
Stegnat Sum
354
answered Nov 10 at 20:17
Stegnat Sum
354
354
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Stegnat Sum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Stegnat Sum is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Stegnat Sum is a new contributor. Be nice, and check out our Code of Conduct.
Stegnat Sum is a new contributor. Be nice, and check out our Code of Conduct.
Stegnat Sum is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239119%2fhow-to-make-a-rounded-drop-shadow-on-a-png-image%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
