
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS linear-gradient() Function
The linear-gradient() is used to define linear gradient as background image −
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Above, set the starting point and direction, with that color stopes to render smooth transitions.
Example
Let us now see an example to implement linear-gradient() −
<!DOCTYPE html> <html> <head> <style> div { text-align: justify; text-justify: inter-word; color: white; background-image: linear-gradient(to bottom right, red , blue); position: absolute; right: 90px; } </style> </head> <body> <h2>Demo Heading</h2> <div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> </body> </html>
Output
Example
<!DOCTYPE html> <html> <head> <style> body { background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet); } .demo { text-decoration: overline; text-decoration-color: yellow; font-size: 1.3em; } </style> </head> <body> <h1>Examination Details</h1> <p class="demo">Exam on 20th December.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
Output
- Related Articles
- Usage of linear-gradient() CSS function
- Usage of repeating-linear-gradient() CSS function
- Repeat a linear gradient with CSS
- How to create linear gradient background using CSS?
- Usage of radial-gradient() CSS function
- Set a linear gradient as the background image with CSS
- Usage of repeating-radial-gradient() CSS function
- Linear gradient with rainbow color
- Linear gradient with multiple color stop
- Repeat a radial gradient with CSS
- How to apply linear gradient (color) to a node in JavaFX?
- Set a radial gradient as the background image with CSS
- How to create a gradient background color on scroll with CSS?
- How to repeat linear gradients with CSS
- CSS rgb() Function

Advertisements