How to create a background gradient using CSS?
Jul 23, 2025 am 01:52 AMThe way to add background gradients to a web page is to use CSS's background-image with linear-gradient or radial-gradient. 1. The most common linear gradient is the up and down direction, the syntax is background-image: linear-gradient(to bottom, white, lightgray) or abbreviated as background-image: linear-gradient(#fff, #f0f0f0); 2. The direction can be changed, such as to right, which means gradient from left to right; 3. The radial gradient is suitable for the circular diffusion effect, and the syntax is background-image: radial-gradient(circle, yellow, orange, red), ellipse can be used to define the ellipse, and the position parameters can adjust the center point; 4. Multi-color gradient can control the transition through color stop points, such as linear-gradient(to right, red 0%, orange 50%, yellow 100%); 5. Gradients can be used with images, syntax such as background-image: url('pattern.png'), linear-gradient(...); 6. It is recommended to add the -webkit- prefix for compatibility with old browsers. After mastering these key points, you can achieve ideal visual effects by debugging the direction and color ratio.
It is actually quite simple to add background gradients to web pages. You can do it by using CSS background-image
with linear-gradient
or radial-gradient
. The key is to write correctly, the color transition is natural, and it is suitable for different browsers.

Basic syntax: linear gradient from top to bottom
The most common gradient is a linear gradient in the up and down direction. For example, if you want the page background to transition from white to light gray, you can write it like this:
background-image: linear-gradient(to bottom, white, lightgray);
It can also be abbreviated as:

background-image: linear-gradient(#fff, #f0f0f0);
This writing method is to change from top to bottom by default. You can also change directions, for example, to right
means a gradient from left to right.
Note: The colors are separated by commas, and the direction keywords (such as to bottom) are placed in the front.
Radial gradient: suitable for circular or center diffusion effect
If you want a background with a bright middle and dark surroundings, such as making buttons or card effects, you can use radial-gradient
:
background-image: radial-gradient(circle, yellow, orange, red);
Here circle
represents a circular gradient area, which can also be replaced with ellipse
to become an ellipse. The number of colors can be increased or decreased according to needs, but generally two to three types are enough, and too many will be unnatural.
Tips: If you want the radial gradient to have offset points, you can add position parameters:
radial-gradient(ellipse at top left, white, black)This way the center of the gradient will be in the upper left.
Multicolor gradient and angle control
In addition to the basic two-color gradient, you can also add multiple color stops to control where each color appears:
linear-gradient(to right, red 0%, orange 50%, yellow 100%)
The percentage here indicates where the color starts in the gradient area. You can use this feature to make a more refined gradient transition.
Common uses include:
- Button hover effect
- Replacement of the website's home screen background image
- Segmented color emphasis (such as transitioning from cool to warm tones)
Gradient overlay and compatibility processing
Sometimes you may want to use gradients with images, and you can use multiple background layers:
background-image: url('pattern.png'), linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(0,0,0,0.5));
Pay attention to the order, the first layer is on the top.
In addition, in order to be compatible with older browsers, it is recommended to add -webkit-
prefix (although most modern browsers do not need it):
background-image: -webkit-linear-gradient(top, white, lightgray); background-image: linear-gradient(to bottom, white, lightgray);
Basically that's it. Try it a few times when writing, adjust the direction and color ratio, and you can create a good visual effect.
The above is the detailed content of How to create a background gradient using CSS?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The core method of building social sharing functions in PHP is to dynamically generate sharing links that meet the requirements of each platform. 1. First get the current page or specified URL and article information; 2. Use urlencode to encode the parameters; 3. Splice and generate sharing links according to the protocols of each platform; 4. Display links on the front end for users to click and share; 5. Dynamically generate OG tags on the page to optimize sharing content display; 6. Be sure to escape user input to prevent XSS attacks. This method does not require complex authentication, has low maintenance costs, and is suitable for most content sharing needs.

1. Maximizing the commercial value of the comment system requires combining native advertising precise delivery, user paid value-added services (such as uploading pictures, top-up comments), influence incentive mechanism based on comment quality, and compliance anonymous data insight monetization; 2. The audit strategy should adopt a combination of pre-audit dynamic keyword filtering and user reporting mechanisms, supplemented by comment quality rating to achieve content hierarchical exposure; 3. Anti-brushing requires the construction of multi-layer defense: reCAPTCHAv3 sensorless verification, Honeypot honeypot field recognition robot, IP and timestamp frequency limit prevents watering, and content pattern recognition marks suspicious comments, and continuously iterate to deal with attacks.

Different browsers have differences in CSS parsing, resulting in inconsistent display effects, mainly including the default style difference, box model calculation method, Flexbox and Grid layout support level, and inconsistent behavior of certain CSS attributes. 1. The default style processing is inconsistent. The solution is to use CSSReset or Normalize.css to unify the initial style; 2. The box model calculation method of the old version of IE is different. It is recommended to use box-sizing:border-box in a unified manner; 3. Flexbox and Grid perform differently in edge cases or in old versions. More tests and use Autoprefixer; 4. Some CSS attribute behaviors are inconsistent. CanIuse must be consulted and downgraded.

The core role of Homebrew in the construction of Mac environment is to simplify software installation and management. 1. Homebrew automatically handles dependencies and encapsulates complex compilation and installation processes into simple commands; 2. Provides a unified software package ecosystem to ensure the standardization of software installation location and configuration; 3. Integrates service management functions, and can easily start and stop services through brewservices; 4. Convenient software upgrade and maintenance, and improves system security and functionality.

Thevertical-alignpropertyinCSSalignsinlineortable-cellelementsvertically.1.Itadjustselementslikeimagesorforminputswithintextlinesusingvalueslikebaseline,middle,super,andsub.2.Intablecells,itcontrolscontentalignmentwithtop,middle,orbottomvalues,oftenu

accent-color is an attribute used in CSS to customize the highlight colors of form elements such as checkboxes, radio buttons and sliders; 1. It directly changes the default color of the selected state of the form control, such as changing the blue check mark of the checkbox to red; 2. Supported elements include input boxes of type="checkbox", type="radio" and type="range"; 3. Using accent-color can avoid complex custom styles and extra DOM structures, and maintain native accessibility; 4. It is generally supported by modern browsers, and old browsers need to be downgraded; 5. Set accent-col

InstallDartSassvianpmafterinstallingNode.jsusingnpminstall-gsass.2.CompileSCSStoCSSusingthecommandsassinput.scssoutput.css.3.Usesass--watchinput.scssoutput.csstoauto-compileonsave.4.Watchentirefolderswithsass--watchscss:css.5.Usepartialswith_prefixfo

To change the text color in CSS, you need to use the color attribute; 1. Use the color attribute to set the text foreground color, supporting color names (such as red), hexadecimal codes (such as #ff0000), RGB values (such as rgb(255,0,0)), HSL values (such as hsl(0,100%,50%)), and RGBA or HSLA with transparency (such as rgba(255,0,0,0.5)); 2. You can apply colors to any element containing text, such as h1 to h6 titles, paragraph p, link a (note the color settings of different states of a:link, a:visited, a:hover, a:active), buttons, div, span, etc.; 3. Most
