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 apply custom css to split post into multiple page

    How to change the color of first row of first table using css

    How to have an asp.net ajax control automatically reference css files

    How to make a div with a circular shape? [duplicate]

    Popup not showing once per session as wanted (as mentioned by client)

    how to scale an image disproportionally via css?

    How to remove flexbox default padding/margin/pagemargin?

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    How to make an image behave like in Primefaces?

    How to change element CSS class when different part of web page is present?

    How to style a selected radio button AND include space as clickable?

    How to avoid css overlapping?

    how to center align IMG in div?

    How to put a canvas on an image?

    How to get Mouse Out effect in CSS

    JavaScript CSS how to add and remove multiple CSS classes to an element

    how to make cross browser css ellipsis?

    How can I :hover over different links in one line while getting the spacing correct?

    How add symbol in CSS for element?

    How to give style (image) for browse button in CSS?

    How to Implement different backgrounds on scroll [closed]

    CSS: How to change class style if another style is hover

    How to make two-coloured stripe using CSS?

    HTML/CSS: How to get the id of sub menu

    how to align div horizontally using CSS?

    how to scroll text area horizontally?

    Please help me understand how to make my first jquery slider

    How to apply custom CSS on Facebook comment box plugin

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    How do we group monospace font families with regards to their serif property? [closed]