CSS gradients are a powerful tool in web design that allow you to create smooth transitions between two or more colors, resulting in visually appealing background effects. Gradients are a popular technique for adding depth, dimension, and visual interest to various elements on a webpage, such as backgrounds, buttons, or text.
CSS provides two types of gradients: linear gradients and radial gradients.
Both types of gradients are defined using CSS properties, such as background-image or background combined with the linear-gradient() or radial-gradient() function. You specify the colors and their positions within the gradient using color stops.
Color stops determine where and how the colors transition within the gradient. You can set precise color stops by specifying a percentage or using keywords like to top, to right, to bottom, or to left to define the direction. Additionally, you can control the blending between color stops by using keywords like linear, ease, ease-in, ease-out, or ease-in-out.
CSS gradients provide great flexibility and control over the appearance of your webpage. You can create simple gradients with two colors or complex gradients with multiple color stops. There are also online gradient generators available that can help you experiment with different gradient styles and produce the CSS code to use in your projects.
By leveraging CSS gradients, you can enhance the visual aesthetics of your website, add depth and texture, and create engaging user experiences.
div{ height: 200px; width: 200px; float:left; margin:10px; color: #fff; }
Linear gradients offer numerous possibilities, allowing you to create stunning visual effects for backgrounds, borders, and other CSS properties. Remember to consider browser compatibility and provide fallback options for older browsers that may not support gradients.
* linear gradient */ /* background-image:linear-gradient(direction,color1,colors2....) */ .box{ background-image: linear-gradient(#9c88ff,#0097e6); } .box1{ background-image: linear-gradient(to right,#9c88ff,#0097e6); } .box2{ background-image: linear-gradient(to left,#9c88ff,#0097e6); } .box3{ background-image: linear-gradient(to bottom right,#9c88ff,#0097e6,#8c7ae6); } /* linear gradient */ /* background-image:linear-gradient(angel,color1,colors2....) */ .box4{ background-image: linear-gradient(146deg,#c23616,#fbc531,rgba(109, 33, 79,0.8)); } .box5{ background: -webkit-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: -moz-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: -o-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: -ms-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); } .box6{ background-image: repeating-linear-gradient(green,pink 10%,yellow 20%); }
These examples demonstrate different ways to use linear gradients in CSS to create beautiful and customizable backgrounds for elements. The syntax allows you to control the direction, colors, and stops of the gradients to achieve the desired visual effects.
The radial-gradient() function in CSS is used to create radial gradients, which transition colors in a circular pattern radiating from a central point. Here's an explanation of how to use it
The basic syntax for radial-gradient() is as follows:
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
/* radial gradient */ /* background-image:radial-gradient(position,color1,colors2....) */ .rbox{ background-image: radial-gradient(#0000ff,#0097e6,#0c4d94); } .rbox1{ width:600px; background-image: radial-gradient(#0000ff 5%,#0097e6 15%,#0c4d94 65%); } .rbox2{ background-image: radial-gradient(circle,#0000ff,#0097e6,#0c4d94); } .rbox3{ background-image: radial-gradient(closest-side at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox4{ background-image: radial-gradient(farthest-side at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox5{ background-image: radial-gradient(closest-corner at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox6{ background-image: radial-gradient(farthest-corner at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox7{ background-image: repeating-radial-gradient(#0000ff,#0097e6 10%,#0c4d94 25%); width:700px; }
These examples demonstrate different ways to use radial gradients in CSS to create visually appealing backgrounds for elements. The syntax allows you to control the position, shape, colors, and stops of the gradients to achieve the desired visual effects.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="gradient.css"> </head> <body> <ul> <li>linear gradient (up,down,left,right,diagonal)</li> <li>radial gradient</li> <li>conic gradient</li> </ul> <h1>Linear gradient</h1> <div class="box"> top to bottom</div> <div class="box1">left to right</div> <div class="box2">right to left</div> <div class="box3">diagonal</div> <div class="box4"> 76deg</div> <div class="box5"> </div> <div class="box6"> </div> <br style="clear:both;"> <h1>radial gradient</h1> <div class="rbox"> </div> <div class="rbox1"> </div> <div class="rbox2"> </div> <div class="rbox3"> </div> <div class="rbox4"> </div> <div class="rbox5"> </div> <div class="rbox6"> </div> <div class="rbox7"> </div> <br style="clear:both;"> <h1>conic gradient</h1> <div class="cbox"></div> <div class="cbox1"></div> <div class="cbox2"></div> <div class="cbox3"></div> <div class="cbox4"></div> </body> </html>
span class="line_wrapper">div{ height: 200px; width: 200px; float:left; margin:10px; color: #fff; } /* linear gradient */ /* background-image:linear-gradient(direction,color1,colors2....) */ .box{ background-image: linear-gradient(#9c88ff,#0097e6); } .box1{ background-image: linear-gradient(to right,#9c88ff,#0097e6); } .box2{ background-image: linear-gradient(to left,#9c88ff,#0097e6); } .box3{ background-image: linear-gradient(to bottom right,#9c88ff,#0097e6,#8c7ae6); } /* linear gradient */ /* background-image:linear-gradient(angel,color1,colors2....) */ .box4{ background-image: linear-gradient(146deg,#c23616,#fbc531,rgba(109, 33, 79,0.8)); } .box5{ background: -webkit-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: -moz-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: -o-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: -ms-linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); background: linear-gradient(rgba(44, 58, 71,0.7),rgba(44, 58, 71,0.9)), url(flower.jpg); } .box6{ background-image: repeating-linear-gradient(green,pink 10%,yellow 20%); } /* radial gradient */ /* background-image:radial-gradient(position,color1,colors2....) */ .rbox{ background-image: radial-gradient(#0000ff,#0097e6,#0c4d94); } .rbox1{ width:600px; background-image: radial-gradient(#0000ff 5%,#0097e6 15%,#0c4d94 65%); } .rbox2{ background-image: radial-gradient(circle,#0000ff,#0097e6,#0c4d94); } .rbox3{ background-image: radial-gradient(closest-side at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox4{ background-image: radial-gradient(farthest-side at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox5{ background-image: radial-gradient(closest-corner at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox6{ background-image: radial-gradient(farthest-corner at 60% 55%,#0000ff,#0097e6,#0c4d94); } .rbox7{ background-image: repeating-radial-gradient(#0000ff,#0097e6 10%,#0c4d94 25%); width:700px; } /* conic gradient */ /* background-image:conic-gradient([from angle][ to position],color1 [degree],colors2....) */ .cbox{ background-image: conic-gradient(#0000ff,#0097e6,#0c4d94); } .cbox1{ background-image: conic-gradient(#0000ff 45deg,#0097e6 180deg,#0c4d94 220deg); } .cbox2{ background-image: conic-gradient(from 120deg,#0000ff,#0097e6,#0c4d94); } .cbox3{ background-image: conic-gradient(at 60% 30%,#0000ff,#0097e6,#0c4d94); border-radius: 50%; } .cbox4{ background-image: repeating-conic-gradient(#0000ff 10%,#0097e6 20%); border-radius: 50%; }Live Preview
Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions