css gradiant div

Posted on 2009-12-21
Last Modified: 2012-05-08
Greetings - is there a way to get the background of a div to display as a gradiant without using an image?  If so how?  I've seen some css workaround from back in 2005, but surely there's a more backed in method to do this in CSS these days?

THanks in advance.
Question by:crmsharepoint
    LVL 9

    Assisted Solution

    the answer for all practical purposes is yes & no.  Does that help? j/k  And just out of curiosity what advantage would you hope to gain over using an image.  Using the image does not slow performance.  

    It is possible to do with extensive coding, but it would hardly be worth it, and you would not have cross browser compatibility.

    Most of the links provided are browser specific.
    Here's some links you may find interesting:

    Here is a another EE post regarding the same question, and giving more or less the same answer I am.

    Hope that helps
    LVL 13

    Accepted Solution

    try this but it'll work only in IE
        filter :   progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=#B7D6E4);
          height: 100%;
    LVL 16

    Assisted Solution

    There is no css2 support for this, but if you are okay with a little js, I can vouch that this works well


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now