Search code examples
csslinear-gradientsradial-gradients

Multiple gradients and radial gradient with center outside of the element

Is it possible to get a similar result with CSS Gradients? Can you use 2 gradients on one div and can the radial one have a center outside the div?

Desired result

Solution

  • It is definitely possible to add more than one gradient to an element (even a combination of linear and radial gradients) by providing them in comma separated format like in the below snippet. The gradient that is specified first (from the right side) forms the bottom most layer while that which is specified last comes on top. Key thing to note is that the gradient (on top) must have colors with alpha less than 1 to be able to show the colors in the lower layers.

    Coming to the second part of the question, radial gradients can be created such that their center point is outside the div. This can be done by specifying negative values for the position.

    The gradient in the below snippet does not tally 100% with the image provided in question but you can get the idea.

    div{
  height: 200px;
  width: 150px;
  border: 1px solid;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), radial-gradient(ellipse at -40% -50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 50%);
  background-size: 180% 200%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='gradient'></div>