From cc49ac0456a81c4ef5d3c7e123a473b97853b205 Mon Sep 17 00:00:00 2001 From: Isaac Miti Date: Wed, 6 Mar 2019 04:15:05 +0200 Subject: [PATCH] Added an example of background gradient with image (#29570) Code sample of how to implement a CSS background gradient, provided a screenshot for demo purpose. --- guide/english/css/background/index.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/guide/english/css/background/index.md b/guide/english/css/background/index.md index 2cf69f839f..ef9f867209 100644 --- a/guide/english/css/background/index.md +++ b/guide/english/css/background/index.md @@ -116,6 +116,16 @@ A gradient is a transition between two or more colors and can be used via CSS si The syntax of a gradient background can be quite complex and is often still used with vendor prefixes due to inconsistencies between supported browsers. +Below is an example of a background gradient: + +![background gradient example image](https://res.cloudinary.com/ikayz/image/upload/v1540563757/gradient.png) + +```css +header { + background-image: linear-gradient(to right, #069, #099); +} +``` + The [Colorzilla Gradient Editor](http://www.colorzilla.com/gradient-editor/) is a great online tool for generating custom gradients and the associated css markup. ### Background – The Shorthand Property