How to make a background using CSS gradient with flat color?


Tags: css3,gradient

Problem :

A backgrond like this with same height of red and yellow.

enter image description here



Solution :

Using Colorzilla's gradient generator, just set two colors to the same % location and you'll get a hard edge between the two colors.

background: #ffff00; /* Old browsers */
background: -moz-linear-gradient(top, #ffff00 30%, #ffff00 30%, #fe0000 30%); /*  FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffff00), color-stop(30%,#ffff00), color-stop(30%,#fe0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#fe0000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* W3C */

    CSS Howto..

    How can I create an inline grouped listview in windows 8

    How to set original image for animate background image in css

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    Javascript (shopping cart) showing up under other content?

    How to make text invisable during hover stage

    How to center the boxes as shown?

    How manage Divisions in browser resizing

    How do I pass a background-image url from one div onto another using jQuery?

    How do I align an inner div with the bottom of an outer div?

    How to stop the latter part of javascript from being called?

    CSS transform Scale translates the object, how to avoid this?

    How can I add a footer to my website similar to the header?

    How to get the CSS left-property value of a div using JavaScript?

    Messed up slides in custom minimal JS/CSS slideshow

    How can I center a figure with caption?

    How to prevent randomly positioned images from overlapping using Angular

    How to animate top % after a delay?

    How know CSS version - ASP.NET - VS Community 2013

    How to change tooltip color on open using jQuery UI Tooltip?

    In css how to joining two div classes without space? [closed]

    sencha touch 2.0 : How to apply conditional background color to list item

    How to integrate site and iframe scroll bar?

    how to vertically align footer contents with css

    How to get 2 fixed and 1 dynamic column in CSS

    How to display drop down menu with an arrow in the top using css?

    How to properly float two columns side by side with css

    How to position HTML code over CSS

    How to set height of a div element to same as another div

    How to remove the background in a slick carousel?

    How to adjust CSS settings for jquery.simply-scroll plugin to occupy full screen