Summary of CSS gradient effects (linear-gradient and radial-gradient)

Summary of CSS gradient effects (linear-gradient and radial-gradient)

Linear-gradient

background-image: 
linear-gradient(to direction, start color, middle color 1, middle color 2, ... , end color);

Combination of four directions - eight directions
top, right, bottom, left

angle
90deg

radial-gradient

background-image: 
radial-gradient(size shape at direction, start color, middle color 1, middle color 2, ..., end color);

Size: a value for the radius of a circle or two values ​​for the semi-major and semi-minor axes of an ellipse as percentages/pixels

shape

circle
ellipse

Direction Percentage/Pixel

closest-side/closest-corner/farthest-side/farthest-corner

background-image: radial-gradient(800px circle at 50% 50%, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%); 

Summarize

This concludes this article about the summary of CSS gradient effects (linear-gradient and radial-gradient). For more relevant CSS gradient effect content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Some settings of Div about border and transparency

>>:  Detailed steps for QT to connect to MYSQL database

Recommend

Analysis of the difference between emits and attrs in Vue3

Table of contents in conclusion Practice Analysis...

vue3+ts+EsLint+Prettier standard code implementation

Table of contents use Use of EsLint Add a profile...

JS implements sliding up and down on the mobile terminal one screen at a time

This article shares with you the specific code of...

Java uses Apache.POI to export HSSFWorkbook to Excel

Use HSSFWorkbook in Apache.POI to export to Excel...

Detailed explanation of jquery tag selector application example

This article example shares the specific code of ...

How to use Navicat to operate MySQL

Table of contents Preface: 1. Introduction to Nav...

Simple tutorial on using Navicat For MySQL

recommend: Navicat for MySQL 15 Registration and ...

Essential Handbook for Web Design 216 Web Safe Colors

The color presentation on a web page will be affec...

Solution to the problem of not finding Tomcat configuration in Intelli Idea

I joined a new company these two days. The compan...

Summary of Mysql slow query operations

Mysql slow query explanation The MySQL slow query...

B2C website user experience detail design reference

Recently, when using Apple.com/Ebay.com/Amazon.co...

Detailed explanation of Tomcat configuration and optimization solutions

Service.xml The Server.xml configuration file is ...

How to install MySQL 8.0 database on M1 chip (picture and text)

1. Download First of all, I would like to recomme...