How to reduce the edge colors of a gradient?

Question

css

Greetings!
There is a gradient

background: linear-gradient(90deg, #333, #f00, #333);

How can I reduce the area of ​​the outermost colors #333 and #333? Push #333 and #333 to the edges, and #f00 should take up the largest area.

Thanks in advance for any help!

Answer 1

You can specify a specific color position by percentages

background: linear-gradient(90deg, #333 0%, #f00 20%, #f00 80%, #333 100%);

In this example, from the beginning to 20% of the background there will be a transition from #333 to #f00, then a solid #f00 from 20% to 80%, from 80% and to the end it will take the transition from #f00 to #333.
An alternative way to make the same gradient:

background: linear-gradient(90deg, #333, #f00, #f00, #f00, #333);