How can I get a very “blurred” box-shadow out of only the bottom of the box?


Tags: html,css,html5,css3

Problem :

My goal is to do this with pure css.

I am trying to make my box shadow with a very big shadow blur like this:

box-shadow: 0 0px 200px -2px #888;

Below the box, it looks awesome, but above now it's darkening the entire page. How can I make a super big blur without this darkening?



Solution :

The best way to go about this might be, to use css-gradients instead of shadows.

I have done a little demo on jsfiddle. I am not sure this is what you are looking for though. Here is the css I used:

background: rgb(254,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,255,255,1) 69%, rgba(226,226,226,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(69%,rgba(254,255,255,1)), color-stop(100%,rgba(226,226,226,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9

As generated by this tool


    CSS Howto..

    How to make an element match the height of a dynamic page

    I want to make semi-identical manu like the one on this page - how? [closed]

    How to use a CSS animation within a JavaScript plugin?

    Css - How to override css for a table cell

    How to define a document in javascript? WebStorm

    How to select a single child class based on its parent class on CSS and jquery?

    How to Scale Down a Large Image Using HTML and/or CSS

    How do I hover with text over div img?

    How to align image and advertisement side by side using CSS and HTML

    How to style last tag img css?

    How to change lines in an angularJS+Bootstrap?

    how to make a responsive website using html/css and javascript [duplicate]

    How to fix the css red notification bubble

    How to combine this css?

    How to place divs one next to another without floatant?

    How to emulate window title bar in CSS/HTML

    How to align a HTML definition list (
    ) horizontally without limiting term or definition in height?

    How to properly display content when I resize the window?

    How to position main content below header and footer in css

    How to make below style:

    How to override a *{list style:none} property

    How to Make a Pentagram with CSS Border Attributes

    How to set CSS rule for a LI in a UL nested in DIV with class?

    How to calculate rotation angle from rectangle points?

    How to make a site have a built in user-friendly editor?

    What is the ::content pseudo-element and how does it work?

    How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?

    How to enlarge a div without moving other elements

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    How can I prevent this div in my table from increasing the cell height?