CSS | Градиенты
Опубликовано: 1 Марта, 2022
CSS - это механизм добавления стиля в различные веб-документы. Одна из важных функций CSS - это градиенты. Градиенты позволяют отображать плавные переходы между двумя и более цветами.
Есть два типа градиентов.
Линейные градиенты: включает плавные переходы цвета вверх, вниз, влево, вправо и по диагонали. Минимум два цвета, необходимые для создания линейного градиента. В линейных градиентах возможно использование более двух цветовых элементов. Начальная точка и направление необходимы для эффекта градиента.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
- Top to Bottom: In this image, the transition started to white color and ended with green color. On exchanging the color sequence, the transition will start with green and will end with white.
Example:<!DOCTYPE html><html><head><title>CSS Gradients</title><style>#main {height: 200px;background-color: white;background-image: linear-gradient(white, green);}.gfg {text-align:center;font-size:40px;font-weight:bold;padding-top:80px;}.geeks {font-size:17px;text-align:center;}</style></head><body><divid="main"><divclass="gfg">GeeksforGeeks</div><divclass="geeks">A computer science portal for geeks</div></div></body></html>Output:
- Left to Right: In this image, the transition started from left to right. It starts from white transitioning to green.
Example:<!DOCTYPE html><html><head><title>CSS Gradients</title><style>#main {height: 200px;background-color: white;background-image: linear-gradient(to right, white, green);}.gfg {text-align:center;font-size:40px;font-weight:bold;padding-top:80px;}.geeks {font-size:17px;text-align:center;}</style></head><body><divid="main"><divclass="gfg">GeeksforGeeks</div><divclass="geeks">A computer science portal for geeks</div></div></body></html>Output:
- Diagonal: This transition started from top-left to bottom-right. It starts with green transition to white. For the diagonal gradient, need to specify both horizontal and vertical starting positions.
Example:<!DOCTYPE html><html><head><title>CSS Gradients</title><style>#main {height: 200px;background-color: white;background-image: linear-gradient(to bottom right,green, rgba(183, 223, 182, 0.4));}.gfg {text-align:center;font-size:40px;font-weight:bold;padding-top:80px;}.geeks {font-size:17px;text-align:center;}</style></head><body><divid="main"><divclass="gfg">GeeksforGeeks</div><divclass="geeks">A computer science portal for geeks</div></div></body></html>Output:
- Repeating Linear Gradient: CSS allows the user to implement multiple linear gradients using a single function repeating-linear-gradient(). The image here contains 3 colors in each transition with some percentage value.
Example:<!DOCTYPE html><html><head><title>CSS Gradients</title><style>#main {height: 200px;background-color: white;background-image: repeating-linear-gradient(#090,#fff 10%, #2a4f32 20%);}.gfg {text-align:center;font-size:40px;font-weight:bold;padding-top:80px;}.geeks {font-size:17px;text-align:center;}</style></head><body><divid="main"><divclass="gfg">GeeksforGeeks</div><divclass="geeks">A computer science portal for geeks</div></div></body></html>Output:
- Angles on Linear Gradients: CSS allows the user to implement directions in Linear Gradients rather than restricting themselves to predefined directions.
Example:<!DOCTYPE html><html><head><title>CSS Gradients</title><style>#main {height: 200px;background-color: white;background-image: repeating-linear-gradient(-45deg,#090, #2a4f32 10%);}.gfg {text-align:center;font-size:40px;font-weight:bold;padding-top:80px;}.geeks {font-size:17px;text-align:center;}</style></head><body><divid="main"><divclass="gfg">GeeksforGeeks</div><divclass="geeks">A computer science portal for geeks</div></div></body></html>Output:
CSS Radial Gradients: A radial gradient differs from a linear gradient. It starts at a single point and emanates outward. By default, the first color starts at the center position of the element and then fade to the end color towards the edge of the element. Fade happens at an equal rate until specified.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
- Radial Gradient- evenly spaced color stops: In CSS, by default, the fade happens at an equal rate. The following figure shows the Radial Gradient with even color stops.
Example:<!DOCTYPE html><html><head><title>CSS Gradients</title><style>#main {height: 350px;width: 700px;background-color: white;background-image: radial-gradient(#090, #fff, #2a4f32);}.gfg {text-align:center;font-size:40px;font-weight:bold;padding-top:80px;}.geeks {font-size:17px;text-align:center;}</style></head><body><divid="main"><divclass="gfg">GeeksforGeeks</div><divclass="geeks">A computer science portal for geeks</div></div></body></html>Output:
- Radial Gradient- unevenly spaced color stops: CSS allows the user to have variation in spacing of color stops while applying radial gradient feature.
Example:<!DOCTYPE html><html><head><title>CSS Gradients</title><style>#main {height: 350px;width: 100%;background-color: white;background-image: radial-gradient(#090 40%, #fff, #2a4f32);}.gfg {text-align:center;font-size:40px;font-weight:bold;padding-top:80px;}.geeks {font-size:17px;text-align:center;}</style></head><body><divid="main"><divclass="gfg">GeeksforGeeks</div><divclass="geeks">A computer science portal for geeks</div></div></body></html>Output:
