CODEWITHSUNDEEP
css
KateG
KateG

Reputation: 107

Creating special effect CSS box-shadow

Trying to create a box-shadow that will be on the bottom side of the div only, and will be darker in the center, and fade out towards the sides.

The closest tutorial I can find for what I am looking to do is: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects (effect #6)

However, I don't want any shadow on the sides at all. Is this possible? Or will I have to create this through imagery?

Upvotes: 2

Views: 1715

Answers (2)

Paulund
Paulund

Reputation: 108

If you want something similar to the effect 6 but want to change things slightly, I've created a tool that uses these effects.

http://coveloping.com/tools/css-box-shadow-generator

You can modify the settings and see in real time the effect it has on the styling.

Upvotes: 0

Manoj Nama
Manoj Nama

Reputation: 639

You can modify the effect #6 to handle your query

.effect6 {
    position:relative;   
}
.effect6:before, .effect6:after {
    content:"";
    position:absolute; 
    z-index:-1;
    box-shadow:0 0 15px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

Here's a Fiddle

There is no direct solution , so you have to tweak settings little bit to create what you are looking for.

Upvotes: 3

Related Questions