An example of such an image An example of such an image. The background is moving smoothly from yellow to blue, how to implement the same transition?

  • You need to use a gradient - Dmitry Kulevich
  • one
    cssmatic.com/gradient-generator# '\ -moz \ -linear \ -gradient \% 28left \% 2C \% 20rgba \% 28248 \% 2C80 \% 2C50 \% 2C1 \% 29 \% 200 \% 25 \% 2C \% 20rgba \% 28241 \% 2C111 \% 2C92 \% 2C1 \% 29 \% 2050 \% 25 \% 2C \% 20rgba \% 28246 \% 2C41 \% 2C12 \% 2C1 \% 29 \% 2051 \ % 25 \% 2C \% 20rgba \% 28240 \% 2C47 \% 2C23 \% 2C1 \% 29 \% 2071 \% 25 \% 2C \% 20rgba \% 28231 \% 2C56 \% 2C39 \% 2C1 \% 29 \% 20100 \% 25 \% 29 \% 3B ' - HamSter
  • one
    colorzilla.com/gradient-editor - HamSter

2 answers 2

body { background: linear-gradient(to right, #F00, #0F0, #00F, #000); }
  • Look closely at the screen - there is NOT a linear gradient, if at all a gradient. - Ilya Bizunov

Something like that

 * { margin: 0; padding: 0; } 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="10%" stop-color="#d9c066" stop-opacity="1" /> <stop offset="90%" stop-color="#6ce7f6" stop-opacity="1" /> </linearGradient> </defs> <rect x="0" y="0" width="500" height="500" rx="0" ry="0" style="fill:url(#myLinearGradient1); stroke: #00500;stroke-width:;" /> </svg>