Aug
10
CSS – Gradients ”; Previous Next CSS gradients allows to design custom colors for HTML elements by creating a smooth transition between two or more colors. What is CSS Gradient? In CSS, gradient is a special type of user defined images that can be used for background or borders of element. We can set a gradient to background property of any HTML elements using function gradient(type, color1, color2, color3); Zooming a image gradient does not loose it”s quality as this are defined by browsers according to developers code. Table of Contents Types of CSS Gradients Linear Gradients Radial Gradients Conic Gradients Gradients for Borders Positioning Color Stops Creating Hard Lines Color Bands Using Gradients Stacked Gradients Related Functions Types of CSS Gradients CSS defines three types of gradients Linear Gradient: Goes from left to right, up to down or diagonally. Radial Gradient: Start from center to edges. Conic Gradient: Revolve around a center point. Linear Gradient Radial Gradient Conic Gradient Choose a gradient for background Linear Gradients The linear gradient creates a color band that flows in a single direction, i.e. from left-to-right, top-to-bottom, or at any angle. Syntax linear-gradient(direction, color1, color2, …); /* Gradient from bottom right to top left */ linear-gradient(to top left, color1, color2, …); /* Gradient at an angle 45 degree */ linear-gradient(45deg, red, yellow); The direction parameter specifies the angle or direction ( [to left | to right] || [to top | to bottom]) of the gradient. Example In order to create a basic linear gradient, you just need two colors, which are known as color stops. You must have minimum two, but can have more than two as well. Following example demonstrates this: <html> <head> <style> div { height: 70px; width: 100%; } .topBottom { background: linear-gradient(green, yellow); } .RightLeft{ background: linear-gradient(to right, green, yellow); } </style> </head> <body> <h1>Linear gradient</h1> <h3>Top to Bottom ( Default )</h3> <div class=”topBottom”></div> <h3>Right to left</h3> <div class=”RightLeft”></div> </body> </html> Radial Gradients A radial gradient is a type of gradient that consists of colors radiating outward from a central point. In a radial gradient, the colors smoothly transition from one color at the center to another color at the outer edges in a circular or elliptical pattern. Syntax radial-gradient(shape size position, color1, color2..); The shape parameter defines the shape of the gradient (circle or ellipse). The size parameter specifies the size of the shape. The position parameter sets the center of the gradient Example In order to create a basic radial gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; where the gradient is elliptical matching with the aspect ratio of its box. Let us see an example: <html> <head> <style> div { height: 100px; width: 100%; } .gradient { background: radial-gradient(green, yellow); } .center-gradient { background: radial-gradient( at 0% 50%, green 30px, yellow 60%, magenta 20% ); } </style> </head> <body> <h1>Radial gradient</h1> <h3>Simple Radial Gradient</h3> <div class=”gradient”></div> <h3>Center Positioned Radial Gradient</h3> <div class=”center-gradient”></div> </body> </html> Conic Gradients A conic gradient, also known as a conical gradient or angular gradient, is a type of gradient in which colors are arranged in a circular or conical pattern, radiating out from a central point in a 360-degree arc. Syntax conic-gradient(from ”angle” at ”position”, ”color-list”) position (optional): Specifies the position of the starting point of the gradient. It can be a percentage or a keyword like center. angle (optional): Specifies the starting angle of the gradient in degrees. color-list : Defines the colors and their positions in the gradient. Example In this example we will create a conic gradient pie chart with four different colors, then align gradient at different locations of diagram. <!DOCTYPE html> <html lang=”en”> <head> <style> div { height: 80px; width: 110px; border-radius: 50%; } .gradient1{ background: conic-gradient( from 45deg at 50% 50%, red, yellow, green, blue, red); } .gradient2{ background: conic-gradient( from 45deg at 20% 40%, red, yellow, green, blue, red); } </style> </head> <body> <h1>Conic Gradient Example</h1> <h3>Align at center</h3> <div class=”gradient1″></div> <h3>Align at 20-40</h3> <div class=”gradient2″></div> </body> </html> Gradients for Borders The CSS gradients can be used to create fancy borders as well. You can use the gradients in wide variety to create effects in the border patterns. Syntax border-image: linear-gradient(”color-list”) You can also use radial and conical gradients for borders. Example Here is an example of use of gradients in creation of borders: <!DOCTYPE html> <html lang=”en”> <head> <style> .gradient-border { height: 200px; width: 200px; border: 10px solid; border-image: linear-gradient( to right, red, yellow, green, blue) 1; } </style> </head> <body> <h2>Gradient Border </h2> <div class=”gradient-border”></div> </body> </html> Positioning Color Stops Positioning color stops for gradient allows to control the point at which transition occur for a gradient. Syntax linear-gradient(to right, red 10%, pink 30%, blue 60%) to right: Specifies the direction of gradient. red 10%: Sets the red color to stop at 10% of the gradient pink 30%: Sets the pink color to stop at 30% of the gradient. blue 60%: Sets the blue color to stop at 60% of the gradient. Example <html>