Theory
Theory
Comments

Color Proportions and Color Stops

By default, colors in gradients are evenly distributed and follow the same proportions, but this behavior can be modified.

This is done using so-called color stops, which are written immediately after the color values, for example, red 0%, yellow 100%.

The color stop indicates the position of the color in the gradient. It can be set as a percentage or in pixels or other units. Let’s take a look at a few examples to understand the behavior of color stops:

`yellow, green`
`yellow 0%, green 100%`
`yellow 0%, green 50%`
`yellow 50%, green 100%`
`yellow 25%, green 75%`
`red, yellow, green`
`red 0%, yellow 50%, green 100%`
`red 33%, yellow 66%, green 100%`

The color stop specifies where the center (most saturated) part of the color will be located.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Color Proportions and Color Stops</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: none; box-shadow: 1px 1px 3px #333333; }

Goalscompleted

First, set a “top to bottom” linear gradient for .flag
consisting of four colors: #ffffff,#1199ff,#0039a6,#d52b1e.
Then assign the following positions for these colors: 25%,50%,75% and100%.

Color Proportions and Color Stops

Comments

Log in

Sign up

Restore access