- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Prabhas](https://www.tutorialspoint.com/assets/profiles/13554/profile/60_90506-1512543588.jpg)
153 Views
You can try to run the following code to implement multi-color gradients in CSS3 −ExampleLive Demo #grad2 { height: 100px; background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); background: linear-gradient(red, orange, yellow, red, blue, green,pink); }
![Srinivas Gorla](https://www.tutorialspoint.com/assets/profiles/13556/profile/60_78057-1512712331.jpg)
170 Views
HSL stands for hue, saturation, lightness. Here, Huge is a degree of the color wheel, saturation and lightness are percentage values between 0 to 100%. ExampleThe following example shows HSL color property:Live Demo #g1 {background-color:hsl(120, 100%, 50%);} #g2 {background-color:hsl(120,100%,75%);} #g3 {background-color:hsl(120,100%,25%);} HSL colors: Green Normal Green Dark Green
![varun](https://www.tutorialspoint.com/assets/profiles/13559/profile/60_29674-1512637943.jpg)
141 Views
You can try to run the following code to implement repeat radial gradients in CSS3 −ExampleLive Demo #grad1 { height: 100px; width: 550px; background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%); background: repeating-radial-gradient(blue, yellow 10%, green 15%); }
![usharani](https://www.tutorialspoint.com/assets/profiles/13564/profile/60_32161-1512638316.jpg)
158 Views
Radial gradients appear at the center. You can try to run the following code to implement radial gradients in CSS3 −ExampleLive Demo #grad1 { height: 100px; width: 550px; background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); background: -o-radial-gradient(red 5%, green 15%, pink 60%); background: -moz-radial-gradient(red 5%, green 15%, pink 60%); background: radial-gradient(red 5%, green 15%, pink 60%); }
![Abhinanda Shri](https://www.tutorialspoint.com/assets/profiles/13552/profile/60_73264-1512711555.jpg)
196 Views
You can try to run the following code to rotate div with skew y-axis using CSS −ExampleLive Demo div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewY(20deg); /* Safari */ -webkit-transform: skewY(20deg); /* Standard syntax */ transform: skewY(20deg); } Welcome to my website. Welcome to my website.
![varma](https://www.tutorialspoint.com/assets/profiles/13568/profile/60_26300-1512638592.jpg)
178 Views
Linear gradients are used to arrange two or more colors in linear formats like top to bottom.ExampleYou can try to run the following code to implement linear gradients in CSS3 −Live Demo #grad1 { height: 100px; background: -webkit-linear-gradient(pink,green); background: -o-linear-gradient(pink,green); background: -moz-linear-gradient(pink,green); background: linear-gradient(pink,green); }
![Ankitha Reddy](https://www.tutorialspoint.com/assets/profiles/13550/profile/60_73963-1512711511.jpg)
123 Views
The opacity is a thinner paints need black added to increase opacity. The following example shows CSS3 Opacity property − Example Live Demo #m1 {background-color:rgb(255,0,0);opacity:0.6;} #m2 {background-color:rgb(0,255,0);opacity:0.6;} #m3 {background-color:rgb(0,0,255);opacity:0.6;} HSLA colors: Red Green Blue
![Sreemaha](https://www.tutorialspoint.com/assets/profiles/13570/profile/60_64977-1512709068.jpg)
151 Views
HSLA stands for hue, saturation, lightness, and alpha. The alpha value specifies the opacity as shown RGBA.ExampleThe following example shows HSLA color property −Live Demo #d1 {background-color:hsla(120,100%,50%,0.3);} #d2 {background-color:hsla(120,100%,75%,0.3);} #d3 {background-color:hsla(120,100%,25%,0.3);} HSLA colors: Less opacity green Green Green
![Priya Pallavi](https://www.tutorialspoint.com/assets/profiles/13562/profile/60_91320-1512544134.jpg)
91 Views
Use the rotate(angle) method to rotate transform the element using y-axis with CSS3 −ExampleLive Demo div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Standard syntax */ } tutorials point.com Rotate Y axis tutorials point.com.
![Giri Raju](https://www.tutorialspoint.com/assets/profiles/13536/profile/60_72105-1512540773.jpg)
175 Views
Use the rotateX(angle) method to rotate transform the element by using x-axis with CSS3 −ExampleLive Demo div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Standard syntax */ } tutorialspoint.com Rotate X-axis tutorialspoint.com