How do I add multiple linear-gradients to a css background? If


Tags: css3,background-color,linear-gradients

Problem :

I am trying to accomplish the left widget box below and as you can see, there is a diagonal linear gradient, as well as a shine from top to bottom. The one I created in CSS is to the right, while the one I am trying to accomplish is to the left. Is there a way I can accomplish this using only one background property? Or would I need to surround the entire div with another div so I can overlay a semi-transparent gradient on it? Thanks

enter image description here

UPDATED with code:

.drk-grad {
  background: linear-gradient(to bottom, #d2d2d2 7%, #b1b1b1 100%);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-clip: padding-box;
  -webkit-box-shadow: 0px 1px 3px 1px #969494;
  box-shadow: 0px 1px 3px 1px #969494;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

SOLUTION:

background: repeating-linear-gradient(rgba(255,255,255,.5) -1%, rgba(107, 107, 107, 0.1), repeating-linear-gradient(135deg, #b6b6b6, #B6B6B6 10px, #b2b2b2 10px, #b2b2b2 20px);


Solution :

Generally you can add multiple backgrounds, separated by commas. The first one listed while appear on top.

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

http://lea.verou.me/css3patterns/

Here's a basic outline. Play with the numbers for your exactly desired effect:

DEMO – http://jsbin.com/tamav/1

.drk-grad {

  background: 

    linear-gradient(to top, transparent, #b1b1b1 100%),

    gray repeating-linear-gradient(45deg, transparent, transparent 35px,

    rgba(255, 255, 255, 0.5) 35px, rgba(255, 255, 255, 0.5) 70px);

  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-clip: padding-box;
  -webkit-box-shadow: 0px 1px 3px 1px #969494;
  box-shadow: 0px 1px 3px 1px #969494;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.3);

}

    CSS Howto..

    How to override xhtml theme css?

    how to make asp.net text box and dropdown flat style in css?

    How exacty works the display: flex property on a container div and the flex property on its inner div?

    How to make an element with opacity 0 unclickable

    How to check if CSS is on an element? [closed]

    Bootstrap - How to make text wrap around an image on small devices?

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    How to cancel left or right rules with an !important tag?

    Why the space after the table, and how to remove it?

    How to make sidebar always visible in the Semantic UI

    Why do small spaces keep showing up in my web pages?

    CSS how to align one word left and another word right within the same div?

    How to make a div 100% width minus a certain amount?

    css code how to remove space between div class

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?

    How to use 3-digit color codes rather than 6-digit color codes in CSS?

    How to make a jquery slider from scratch

    How to slide content opening up with jquery

    In Python, I can print HTML to the browser, how can I ensure that the CSS that relates to it also get “printed”

    How do I loop a css animation with multiple keyframe definitions?

    How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

    how to properly use CSS Class and ID [closed]

    css - how to stretch a background image across the entire window

    how to stick the footer to the bottom of the page while moving it upward in a parallax-like effect?

    How do I create two columns using CSS?

    How to display line items in twos?

    How to create a progress dialog when switching the webpages?

    How to apply custom css to android Webview when URL is from internet server?

    How to manage css files the best way