Posts

Showing posts from March, 2019

CSS Gradients

Image
CSS gradients let you display smooth transitions between two or more specified colors. Types of gradients Linear Gradients(down/up/left/right/diagonally) Radial Gradients Syntax for linear gradients:- background-image: linear-gradient( direction , color-stop1 , color-stop2, ... ); CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. CSS Radial Gradient A radial gradient is defined by its center. Syntax for radial gradients:- background-image: radial-gradient( shape size at position, start-color, ..., last-color ); For example:- <!DOCTYPE html> <html> <head> <style>  *{   padding: 0px;   margin: 0px;  } #grad1 {   height: 400px;   background-color: red;   background-image: linea...