InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS

    CSS selectors

    • CSS selectors

    CSS properties

    • CSS properties

    CSS cookbooks

    • !important annotation
    • Align div in center horizontally
    • Align div in center vertically
    • Align multiple divs horizontally
    • Align text in center horizontally
    • CSS - drop cap effect
    • CSS - enlarge image on hover
    • CSS - round toggle switch using checkbox and label
    • CSS automatic table row numbering
    • CSS circle and oval
    • CSS clearfix - clear float automatically using ::after
    • CSS counters
    • CSS nested counters
    • CSS3 gradients
    • Create CSS triangles
    • First letter capital and bigger
    • How to display text on image using css
    • Install sass on Mac or Linux using ruby gem
    • Place a div in bottom right corner of browser
    • Test site css, javascript, html in old IEs
    • csslint
    • inherit value
    • initial value
    • inline-block and baseline alignment
    • margin collapsing
    • node-sass quick start tutorial on Linux and Mac
    • unset value
    • web typography
     
    • Home
    • > Tutorials
    • > CSS

    CSS3 Gradient examples

    on Aug 26, 2016

    A gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and many other things. We can have linear and radial gradients (optionally repeating). It applies to background-image property (or shorthand background).

    Linear gradient

    Syntax:

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
    background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
    

    Few points to note:

    1. Direction can be:
      1. to top
      2. to right
      3. to bottom
      4. to left
      5. 30deg (30 degree clockwise angle from upwards direction)
    2. We can define multiple stops
    3. Color stops can optionally have position markers (10px, 20%, etc.)

    Examples:

    In the following code, CSS property background-image can be changed to the following values
    • linear-gradient(yellow, blue)
    • linear-gradient(to right, yellow, blue)
    • linear-gradient(to right, yellow, blue 20%)
    • linear-gradient(45deg, yellow, blue)
    • repeating-linear-gradient(yellow, blue 20px)
    <style type="text/css" media="screen">
    .gradientbox {
      width: 200px; height: 100px;
      background-image: linear-gradient(yellow, blue);
    }
    </style>
    
    <div class="gradientbox"></div>
    
    background-image refresh done
    try it online

    Radial gradient

    background-image: radial-gradient(size shape at position, stop1, stop2, ...)
    background-image: repeating-radial-gradient(size shape at position, stop1, stop2, ...)
    

    Few points to note:

    1. shape can be circle or ellipse. (Unless size is single lenght, it default to ellipse if omitted)
    2. We can define multiple stops
    3. position default to center.
    4. size can be implicit ( closest-side, farthest-side, closest-corner, farthest-corner). farthest-corner is default.
    5. size can also be explicit. One value for circle and two values for ellipse.

    Examples:

    In the following code, CSS property background-image can be changed to the following values
    • radial-gradient(yellow, blue)
    • radial-gradient(circle, yellow, blue)
    • radial-gradient(5em circle, yellow, blue)
    • radial-gradient(circle at top left, yellow, blue)
    • radial-gradient(yellow, blue, green, red)
    • repeating-radial-gradient(1em circle, yellow, blue)
    <style type="text/css" media="screen">
    .gradientbox {
      width: 200px; height: 100px;
      background-image: radial-gradient(yellow, blue);
    }
    </style>
    
    <div class="gradientbox"></div>
    background-image refresh done
    try it online

    Specification and Browser compatibility

    SpecificationStatusCategories
    CSS GradientsW3C Candidate RecommendationCSS3
    Desktop
    ChromeFirefoxIEEdgeSafariOpera
    Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 12.1+
    Mobile
    Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
    Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 12.1+
    source: caniuse.com

    Suggested posts:

    1. CSS3 animation overview
    2. CSS – !important examples
    3. CSS background-color
    4. CSS – child vs descendant selector examples
    5. How to display text on image using css
    6. CSS ::before and ::after examples
    7. CSS border-color – define color of four borders
    8. CSS border radius and round corners examples
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, CSS cookbook, Tutorials, Web Development

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2023 InfoHeap.

    Powered by WordPress