In CSS, you can smoothly make transitions between two or more colors. CSS has two types of gradients:
- Linear gradient: It goes down/up/left/right/diagonally and makes smooth transitions of colors. To make a linear transition you first have to choose two color stops. Color stops are the color among which you want to make the transitions. You can also select a starting point and a direction(an angle) for the transition.
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
- Radial gradient: It is defined by the center. Here also you have to specify at least two color spots.
background-image: radial-gradient(shape size at position, start-color, ...);
- CSS | linear-gradient() Function
- CSS | repeating-linear-gradient() Function
- How to create linear gradient text using HTML and CSS ?
- CSS | Combine background image with gradient overlay
- How to Create Gradient Background Animation using HTML and CSS ?
- How to create a radio button similar to toggle button using Bootstrap ?
- button tag vs input type="button" attribute
- CSS | transition Property
- Semantic-UI | Transition
- Difference between background and background-color
- ReactJS | Transition Group
- CSS | transition-duration Property
- CSS | transition-delay Property
- CSS | transition-timing-function Property
- Transition shorthand with multiple properties in CSS?
- HTML | DOM Style transition Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.