Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn CSS
  • CSS Gradient

Topics

  • CSS Introduction
  • CSS Syntax and CSS Comments
  • CSS Selectors
  • How to add CSS to a Webpage
  • CSS Color Basics
  • CSS Background Properties
  • CSS Border Properties
  • CSS Margin and Padding Properties
  • CSS Height and Width properties
  • CSS Box Model
  • CSS Outline Properties
  • CSS Fonts
  • CSS Text
  • How To Add Icons
  • CSS Links
  • CSS List-Style
  • CSS Tables
  • CSS Display Property
  • CSS Position Property
  • CSS Overflow Property
  • CSS max-width Property
  • CSS Float and Clear Properties
  • CSS Alignment
  • CSS inline-block
  • CSS Combinators
  • CSS Pseudo Classes
  • CSS Pseudo Elements
  • CSS Opacity
  • CSS Navigation Bar
  • CSS Dropdowns
  • CSS Image Gallery
  • CSS Image Sprites
  • CSS Attribute Selector
  • CSS Styling Forms
  • CSS Counters
  • CSS Units
  • CSS Specificity
  • CSS Website Layout
  • CSS Rounded Corners
  • CSS Border Image Property
  • CSS Multiple Backgrounds
  • CSS Gradient
  • CSS Shadow Effects
  • CSS Text Effects
  • CSS Web Fonts
  • CSS 2D Transforms

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

CSS Gradient

CSS is the mechanism of adding style in the various web documents. One of the important features is CSS gradient. The gradient feature allows you to create a gradient from one color to another without using any images.
There are two types of Gradients.
  • Linear Gradients
  • Radial Gradients

CSS Linear Gradients

Transitions in linear gradients occur along a straight line determined by a direction or angle. A CSS linear gradient can be coded by using the linear-gradient() function.The minimum two-color required to create a linear gradient. More than two-color elements can be possible in linear gradients. The starting point and the direction is needed for the gradient effect.
The basic syntax of creating the linear gradients using the keywords can be given as:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

Linear Gradient - Top to Bottom

In the below example, the transition started to pink color and ended with a blue color from top to bottom. This is the default.

Example:

#top-bottom {

height: 150px;

background-color: pink;

background-image: linear-gradient(pink, blue);

}
Try it

Linear Gradient - Left to Right

In the below example, the transition started to pink color and ended with a blue color from left to right.

Example:

#left-right {

height: 150px;

background-color: pink;

background-image: linear-gradient(to right, pink, blue);

}
Try it

Linear Gradient - Diagonal

This transition started from top-left to bottom-right. It starts with the pink transition to blue. For the diagonal gradient, need to specify both horizontal and vertical starting positions.

Example:

#diagonal {

height: 150px;

background-color: pink;

background-image: linear-gradient(to bottom right, pink, blue);

}
Try it

Angles on Linear Gradients

CSS allows the user to implement directions in Linear Gradients rather than restricting themselves to predefined directions. The angle 0deg creates a bottom to the top gradient, and positive angles represent clockwise rotation, which means the angle 90deg creates a left to the right gradient.

Example:

#angle {

height: 150px;

background-color: pink;

background-image: linear-gradient(90deg, pink, blue);

}
Try it

Using Multiple Color Stops

You can also create gradients for more than two colors. The below example will show you how to create a linear gradient using multiple color stops.

Example:

#multi-color {

height: 150px;

background-color: pink;

background-image: linear-gradient(red, pink, blue, yellow);

}
Try it

Repeating a linear-gradient

CSS allows the user to implement multiple linear gradients using a single function repeating-linear-gradient(). The below example contains three colors in each transition with some percentage value.

Example:

#multi-color {

height: 150px;

background-color: pink;

background-image: repeating-linear-gradient(red, pink 15%, blue 25%);

}
Try it

CSS Radial Gradients

A radial gradient is different from the linear gradient. By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified.
The basic syntax of creating a radial gradient can be given as:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Radial Gradient- evenly spaced color stops

Evenly spaced color stops is a default radial gradient. It is by default shape is an eclipse, size is farthest- corner, and position is center.

Example:

#radial {

height: 200px;

width: 250px;

background-color: pink;

background-image: radial-gradient(red, pink, blue);

}
Try it

Radial Gradient - Differently Spaced Color Stops

CSS allows the user to have variation in the spacing of color stops while applying the radial-gradient feature.

Example:

#radial {

height: 200px;

width: 250px;

background-color: pink;

background-image: radial-gradient(red 20%, pink 45%, blue 35%);

}
Try it

Setting the Shape of Radial Gradients

The shape argument of the radial-gradient() function is used to specify the ending shape of the radial gradient. It has the value circle or ellipse.

Example:

#radial {

height: 200px;

width: 250px;

background-color: pink;

background-image: radial-gradient(circle, red, pink, blue)

}
Try it

Setting the Size of Radial Gradients

The size parameter of the radial-gradient() function is used to define the size of the gradient’s ending shape. Size can be set using units or the keywords: closest-side, farthest-side, closest-corner, farthest-corner.

Example:

#example1 {

height: 200px;

width: 250px;

background-color: pink;

background-image: radial-gradient(closest-side at 70% 65%, red, pink, blue);

}

#example2 {

height: 200px;

width: 250px;

background-color: pink;

background-image: radial-gradient(farthest-side at 70% 65%, red, pink, blue);

}

#example3 {

height: 200px;

width: 250px;

background-color: pink;

background-image: radial-gradient(closest-corner at 70% 65%, red, pink, blue);

}

#example4 {

height: 200px;

width: 250px;

background-color: pink;

background-image: radial-gradient(farthest-corner at 70% 65%, red, pink, blue);

}
Try it

Repeating a radial-gradient

If you want to repeat radial gradients then use repeating-radial-gradient() function.

Example:

#radial {

height: 200px;

width: 250px;

background-color: pink;

background-image: repeating-radial-gradient(red, pink 15%, blue 30%);

}
Try it

Post navigation

CSS Multiple Backgrounds
CSS Shadow Effects

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok