Question 173241 in CSS Question posted in
Some basic documentation can be found here.

Linear CSS color gradient with radial alpha/transparency gradient?

I’m not sure how to achieve that. I need to have a left-to-right color gradient with radial gradient so that both extreme ends are gradually fading away. Is that even possible?

My linear color gradient CSS is as follows:

div {
  background: rgb(5, 75, 135);
  background: linear-gradient(90deg, rgba(5, 75, 135, 1) 24%, rgba(166, 40, 46, 1) 69%);
  
  height: 3em;
}
<div></div>
Tags:

2

Answers


  1. 0

    this would help: background: radial-gradient( rgba(5, 75, 135, 1) 10%, rgba(166, 40, 46, 0.7) );

    Login or Signup to reply.
  2. 0

    I don’t know exactly what you are looking for. You can achieve linear-gradient and radial-gradient using background-blend-mode
    linear-gradient(to right.... and radial-gradient(at left... or vice-versa according to your need

    div.one {
  background: rgb(5, 75, 135);
  background: linear-gradient(to right, rgba(5, 75, 135, 1), rgba(166, 40, 46, 1)), radial-gradient(at left, rgba(5, 75, 135, 1), transparent);
  height: 3em;
  background-blend-mode: screen;
}



div.two {
  background: rgb(5, 75, 135);
  background: linear-gradient(to right, rgba(5, 75, 135, 0), rgba(5, 75, 135, 1), rgba(166, 40, 46, 1), rgba(166, 40, 46, 0)), radial-gradient(at left, rgba(5, 75, 135, 1), transparent);
  height: 3em;
  background-blend-mode: screen;
}
    <div class="one"></div>
<br>
<div class="two"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search