When using CSS gradients, we instruct the browser's layout engine to draw patterns following our CSS directions. A
gradient corresponds to a runtime-generated, size-independent image, and so it can be used wherever the url()
notation is allowed. There are four types of gradients:
linear-gradient
, repeating-linear-gradient
,
radial-gradient
, and
repeating-radial-gradient
. The following gradient code example provides an introductory overview of each of them:
<!doctype html> <html> <head> <meta charset="utf8"> <title>Explore gradients</title> <style> .box{ width: 400px; height: 80px; border: 3px solid rgb(60,60,60); margin: 10px auto; border-radius: 5px; font-size: 30px; text-shadow: 2px 2px white; } #linear{ background-image: linear-gradient(top left, red, white, green); } #repeating_linear{ background-image: repeating-linear-gradient(top left, red,...