Theory
Theory
Comments

Sharp Color Transitions

The color position (or color stop) specifies the position of the central part of the color, the point from which the transition to another color begins.

What happens if you set the same position for adjacent colors? In this case, there will be a sharp transition of colors, since both of them will “flow” from the same point in opposite directions.

It is easier to demonstrate this behavior with an example:

`yellow 25%, green 75%`
`yellow 45%, green 55%`
`yellow 49%, green 51%`
`yellow 50%, green 50%`

This technique is often used to create interesting effects.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Sharp Color Transitions</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flag"></div> </body> </html>

CSS

body { background-color: #f5f5f5; } .flag { margin: 100px auto; width: 360px; height: 240px; background-image: linear-gradient(#ffffff 25%, #1199ff 50%, #0039a6 75%, #d52b1e 100%); box-shadow: 1px 1px 3px #333333; }

Goalscompleted

Change the positions of the first and second colors to 33%.
Then change the positions of the third and fourth colors to 66%.
Then change the second color from #1199ff to #0039a6.

Sharp Color Transitions

Comments

Log in

Sign up

Restore access