Background linear gradient

Author: c | 2025-04-24

/ Premium Dark CSS Linear Gradient Background / .gradient { background: ; background: linear-gradient( to right, , ); } TailwindCSS Linear Gradient

Background in css with linear-gradient and repeating-linear-gradient

How they work:Top to Bottom DirectionIt shows a linear gradient that starts at the top and transitions to the bottom.Example:DOCTYPE html>html>head>style>.tb { height: 400px; width: 300px; background-color: grey; background-image: linear-gradient(grey, orange);}p{ font-size: 18px;}style>head>body> h1>Linear Gradient - Top to Bottomh1> p>This linear gradient starts grey at the top, transitioning to orange at the bottom.p>div class="tb">div>body>html>Here is the outcome:Notice that the linear gradient starts grey at the top and transitions to orange at the bottom.Left to Right DirectionIt shows a linear gradient that begins from the left and transitions to the right.Example:DOCTYPE html>html>head>style>.lr { height: 400px; width: 300px; background-color: grey; background-image: linear-gradient(to right, grey , orange);}p{ font-size: 20px;}style>head>body> h1>Linear Gradient - Left to Righth1> p>This linear gradient starts grey at the left, transitioning to orange to the right:p>div class="lr">div>body>html>Here is the result:The linear gradient starts grey on the left, transitioning to orange on the right.Diagonal DirectionA diagonal linear gradient is a gradient that transitions between colors in a diagonal line rather than a horizontal or vertical line.Example:DOCTYPE html>html>head>style>.d { height: 400px; width: 300px; background-color: grey; background-image: linear-gradient(to bottom right, grey, orange);}p{ font-size: 20px;}style>head>body> h1>Linear Gradient - Diagonalh1> p>This linear gradient starts grey at the top left, transitioning to orange at the bottom right:p>div class="d">div>body>html>Here is the result of the code:Notice that the linear gradient starts grey at the top left and transitions to orange at the bottom right.Using AnglesThe Angle gives you more control over a gradient direction by specifying an angle rather than limiting the focus to the bottom, top, right, left, and bottom right. Note that 0deg is equal to the top, 90deg is similar to the right, and 180deg is equal to the bottom.Example:DOCTYPE html>html>head>style>.angle1 { height: 180px; width: 150px; background-color: grey; background-image: linear-gradient(0deg, grey, orange); font-size: 20px;}.angle2 { height: 180px; width: 150px; background-color: grey; background-image: linear-gradient(90deg, grey, orange);

Linear Gradient in CSS: How to Create Gradient Backgrounds

Color=> #37cdff> rgba(color, 0.5)=> rgba(55,205,255,0.5)$ stylus -i> color = white=> #fff> color - rgb(200,50,0)=> #37cdff> color=> #fff> color -= rgb(200,50,0)=> #37cdff> color=> #37cdff> rgba(color, 0.5)=> rgba(55,205,255,0.5)Resolving relative urls inside imports By default Stylus don't resolve the urls in imported .styl files, so if you'd happen to have a foo.styl with @import "bar/bar.styl" which would have url("baz.png"), it would be url("baz.png") too in a resulting CSS.But you can alter this behavior by using --resolve-url (or just -r) option to get url("bar/baz.png") in your resulting CSS.List dependencies You can use --deps (or just -D) flag to get a list of dependencies of the compiled file.For example, suppose we have test.styl:@import 'foo'@import 'bar'@import 'foo'@import 'bar'And inside foo.styl:@import 'baz'@import 'baz'Running:$ stylus --deps test.styl$ stylus --deps test.stylWill give us list of the imports paths:foo.stylbaz.stylbar.stylfoo.stylbaz.stylbar.stylNote that currently this does not works for dynamically generated paths.Utilizing Plugins For this example we'll use the nib Stylus plugin to illustrate its CLI usage.Suppose we have the following Stylus, which imports nib to use its linear-gradient() function.@import 'nib'body background: linear-gradient(20px top, white, black)@import 'nib'body background: linear-gradient(20px top, white, black)Our first attempt to render using stylus(1) via stdio might look like this:$ stylus test.styl$ stylus test.stylWhich would yield the following error (because Stylus doesn't know where to find nib).Error: stdin:3 1| 2|> 3| @import 'nib' 4| 5| body 6| background: linear-gradient(20px top, white, black)Error: stdin:3 1| 2|> 3| @import 'nib' 4| 5| body 6| background: linear-gradient(20px top, white, black)For plugins that simply supply Stylus APIs, we could add the path to the Stylus lookup paths. We do so by using the --include or -I flag:$ stylus test.styl --include ../nib/lib$ stylus test.styl --include ../nib/libNow yielding the output below. (As you might notice, calls to gradient-data-uri() and create-gradient-image() output as literals. This is because exposing the library path isn't enough when a plugin provides a JavaScript API. However, if we only wanted to use pure-Stylus nib functions, we'd be fine.)body { background: url(gradient-data-uri(create-gradient-image(20px, top))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)); background: -webkit-linear-gradient(top, #fff 0%, #000 100%); background: -moz-linear-gradient(top, #fff 0%, #000 100%); background: linear-gradient(top, #fff 0%, #000 100%);}body { background: url(gradient-data-uri(create-gradient-image(20px, top))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)); background: -webkit-linear-gradient(top, #fff 0%, #000 100%); background: -moz-linear-gradient(top, #fff 0%, #000 100%); background: linear-gradient(top, #fff 0%, #000 100%);}So, what we need to do is use the --use, or -u flag. It expects a path to a node module (with or without the .js extension). This require()s the module, expecting a function to be exported as module.exports, which then calls style.use(fn()) to expose the plugin (defining its js functions, etc.).$ stylus test.styl --use ../nib/lib/nib$ stylus test.styl --use ../nib/lib/nibYielding the expected result:body { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII="); background: -webkit-gradient(linear, left top,

How to create linear gradient background

Here are 25 public repositories matching this topic... Code Issues Pull requests 🎨 Tricolor background patterns created using CSS linear and radial gradients. Updated Oct 4, 2020 CSS Code Issues Pull requests Horizontal and vertical examples of responsive Timelines built with the latest Bootstrap 5. Easy to use and customize. Updated Jan 28, 2022 JavaScript Code Issues Pull requests A custom Framework used to add animations and effect to UIButtons. Updated Jan 5, 2022 Swift Code Issues Pull requests Combile Tailwind CSS with AngularJS Updated Dec 29, 2022 TypeScript Code Issues Pull requests 🌈 Create your own css gradient background or generate a random one.😉 Updated Aug 16, 2023 JavaScript Code Issues Pull requests Discussions Facebook gradient background Updated Feb 7, 2023 HTML Code Issues Pull requests This repository contains code for CSS background patterns. Updated Jun 27, 2023 CSS Code Issues Pull requests Template on Next.js with support of axios, API (GET, POST, DELETE). Date default takes from localhost. +Data from Github account 🔐 Updated Jun 17, 2022 JavaScript Code Issues Pull requests Easy way to add beauty background gradient on your websites. If you will like it i'm gonna add more gradient background themes for you 🎨 Updated Feb 21, 2022 SCSS Code Issues Pull requests A custom UIView with an ability to animate a linear gradient layer for a given set of colors. Updated Aug 24, 2019 Objective-C Code Issues Pull requests JavaScript library for creating, animating, and manipulating CSS gradients and background patterns with ease. Updated Jan 31, 2025 JavaScript Code Issues Pull requests Create background gradients for your website using different colors. Updated Aug 17, 2020 JavaScript Code Issues Pull requests Simple colorful gradient background application Updated Apr 26, 2018 Java Code Issues Pull requests Gradient Background Generator using HTML, CSS and JAVASCRIPT Updated Jan 3, 2023 HTML Code Issues Pull requests Randomize custom gradient backgrounds for your websites. Updated Jul 26, 2021 JavaScript Code Issues Pull requests Updated Jun 26, 2020 C# Code Issues Pull requests Simple Animated Gradient Background Example Updated Oct 15, 2018 Java Code Issues Pull requests Modern Bank Application Design with React and Tailwind Updated Feb 11, 2024 JavaScript Code Issues Pull requests Creare uno sfondo sfumato tramite codice Updated Sep 13, 2020 Kotlin Code Issues Pull requests Simple gradient background animation Updated Oct 4, 2018 CSS --> Improve this page Add a description, image, and links to the gradient-background. / Premium Dark CSS Linear Gradient Background / .gradient { background: ; background: linear-gradient( to right, , ); } TailwindCSS Linear Gradient

background: linear-gradient () not working on mobile

Font-size: 20px;}.angle3 { height: 180px; width: 150px; background-color: grey; background-image: linear-gradient(180deg, grey, orange); font-size: 20px;}style>head>body>h1>Linear Gradients - Using Different Anglesh1>div class="angle1"style="text-align:center;">0degdiv>br>div class="angle2"style="text-align:center;">90degdiv>br>div class="angle3"style="text-align:center;">180degdiv>br>body>html>Here is the outcome:Notice the first image has orange background color at the top because 0deg is equal to the top, and the second image has orange background color at the right because 90deg is similar to the right. Finally, the third image has orange background color at the bottom because 180deg is equal to the bottom.Using Multiple Color StopsThe multiple color stops demonstrate a linear gradient from top to bottom. In addition, you can use it to create gradients that transition between more than two colors.Example:DOCTYPE html>html>head>style>.mc { height: 500px; width: 400px; background-color: gray; background-image: linear-gradient(grey, pink,silver, orange,green);}style>head>body> h1>Linear Gradients - Multiple Color Stopsh1>div class="mc">div>body>html>Here is the outcome:Using TransparencyYou can use gradient transparency to create fading gradient effects. In addition, the clarity of the image or element varies depending on the colors in the gradient. Finally, to add transparency, use the rgba() process to explain the color stops. For instance, the value of the rgba() function in the last parameter could be from 0 to 1, which explains the color’s transparency 0 indicates full transparency, and 1 shows full color (no transparency).For example:DOCTYPE html>html>head>style>.t { height: 400px; background-image: linear-gradient(to right, rgba(128,128,128,1), rgba(128,128,128,0));}style>head>body>h1>Linear Gradient - Transparencyh1>div class="t">div>body>html>Here is the result:Notice the linear gradient starts fully transparent from the right and transitions to full grey color.Repeating a linear-gradientTo repeat a linear gradient, you can use the repeating-linear-gradient() function in CSS. This function is the same as the linear-gradient() function but repeats the gradient pattern along the direction you specify.Let us see an example of how to use the repeating-linear-gradient() function to create a repeating gradient:DOCTYPE html>html>head>style>.rg1 { height: 140px; width: 600px; background-color: grey; background-image: repeating-linear-gradient(gray, pink 10%, orange 20%);}.rg2

background-image: linear-gradient - CodePen

Bên trái: nền: ## 901A1C; background-image: -moz-linear-gradient (phía trên bên phải, # 901A1C 0%, # FFFFFF 100%); background-image: -webkit-gradient (tuyến tính, đỉnh phải, đáy trái, màu dừng (0, # 901A1C), màu dừng (1, #FFFFFF)); nền: -webkit-linear-gradient (phải trên cùng, # 901A1C 0%, #ffffff 100%); background: -o-linear-gradient (phía trên bên phải, # 901A1C 0%, #ffffff 100%); nền: -ms-linear-gradient (phía trên bên phải, # 901A1C 0%, #ffffff 100%); nền: linear-gradient (phải trên cùng, # 901A1C 0%, #ffffff 100%); Bạn có thể nhận thấy rằng không có bộ lọc IE nào trong ví dụ này. Đó là bởi vì IE chỉ cho phép hai loại bộ lọc: từ trên xuống dưới (mặc định) và từ trái sang phải (với công tắc GradientType = 1). Xem gradient tuyến tính chéo này trong hành động chỉ sử dụng CSS. 03 trên 04 Dừng màu Một gradient với ba điểm dừng màu. J Kyrnin Với gradient tuyến tính CSS3, bạn có thể thêm nhiều màu sắc cho gradient của mình để tạo ra hiệu ứng thậm chí còn đẹp hơn. Để thêm các màu này, bạn thêm các màu bổ sung vào cuối thuộc tính của mình, được phân tách bằng dấu phẩy. Bạn nên bao gồm nơi trên dòng màu sắc nên bắt đầu hoặc kết thúc là tốt. Bộ lọc Internet Explorer chỉ hỗ trợ hai điểm dừng màu, vì vậy khi bạn tạo gradient này, bạn chỉ nên bao gồm màu đầu tiên và thứ hai mà bạn muốn hiển thị. Đây là CSS cho gradient 3 màu ở trên: nền: #ffffff; nền: -moz-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, #ffffff 100%); background: -webkit-gradient (tuyến tính, đầu trái, phải trên cùng, màu dừng (0%, # ffffff), màu dừng (51%, # 901A1C), dừng màu (100%, # ffffff)); nền: -webkit-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); background: -o-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); nền: -ms-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1); background: gradient tuyến tính (trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%); Xem gradient tuyến tính này với ba điểm dừng màu trong hành động chỉ bằng CSS. 04/04 Làm cho tòa nhà Gradients dễ dàng hơn Trình tạo Gradient CSS cuối cùng. ảnh chụp màn hình bởi J Kyrnin lịch sự ColorZilla Có hai trang web tôi khuyên bạn nên giúp bạn xây dựng gradient, mỗi trang web đều có những lợi ích và hạn chế đối với họ, tôi chưa tìm thấy trình tạo gradient làm mọi thứ. Trình tạo Gradient CSS cuối cùng Trình tạo gradient này rất phổ biến vì

How to create a linear gradient background that will

-webkit-background-clip (thx Albert Scheiner). 2013.02.11: Added inset toggle for box-shadow (thx Ryan). 2013.02.05: Chrome 26 support for unprefix transitions and unprefixed gradients. 2012.12.31: Removed -moz-background-clip (thx Mottie). 2012.08.29: Removed IE6-8 support. 2012.06.06: Removed -ms prefixes from transition, animations and gradients. 2012.03.02: Added box-sizing. Woo! 2012.01.21: Added transform scale and 3d transforms.(thx uxder) 2012.01.19: Linear Gradient Syntax Updated. (thx cssdeck and uxder!) 2012.01.14: Added tab-size. (Blame Mathias if anything breaks!) 2011.10.23: Added the sweet matrix manip demo from Peter Nederlof. Thx Peter! 2011.10.18: CSS Animations added. (thx wookiehangover!) 2011.07.27: Added multicolumn. (thx hotmeteor!) 2011.04.12: Added gradient for IE10! (thx calvein!) 2011.04.11: Added background-clip for the border-radius rule (thx matthewlein!). 2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks david meister) 2011.04.07: Added background-size (thx codler!). 2011.03.26: Added Ceaser link. 2011.03.15: Added linear gradients for Opera 11.10. (Thanks, Mike!) 2012.03.01: Went one year into the future to make a minor text change. Phew! 2011.02.22: Browser support updated. 2011.02.20: Tab key support added (good idea, iszak) 2011.02.20: Fixed longstanding rgba NaN bug. 2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.) 2011.02.10: New gradient syntax (Thx Sami). Update @font-face syntax. 2011.01.05: Removed unneeded -ms-filter declarations and added unprefixed linear-gradient. (Thx Mathias) 2010.11.19: Better handling of users without Flash. (Thx Mathias) 2010.11.06: Toggle to light skin (Thx Curtis Blackwell!). IE9 Transform added. Clipboard only grabs rules, no selector. 2010.10.05: Unprefixed transitions, transforms 2010.06.02: Clipboard click strips comments 2010.05.03: IE Rotation bug fixed. (Thx Joshua!) 2010.04.11: text-shadow added. 2010.04.05: Real rotation in IE (Thx Zoltan!). Added transition. No more DropShadow for IE (it's crap) 2010.04.04: New copy to clipboard style. Better mousewheel support. 2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.*/

background-image linear-gradient - Codesandbox

{ height: 140px; width: 600px; background-color: grey; background-image: repeating-linear-gradient(45deg,grey,pink 7%,orange 10%);}.rg3 { height: 140px; width: 600px; background-color: grey; background-image: repeating-linear-gradient(190deg,grey,pink 7%,orange 12%);}p{ font-size: 22px;}style>head>body>h1>Repeating Linear Gradienth1> p>A repeating gradient starting gray and ending orange:p>div class="rg1">div> p>A repeating gradient on 45deg axe starting gray and ending orange:p>div class="rg2">div> p>A repeating gradient on 190deg axe starting grey and ending orange:p>div class="rg3">div>body>html>Here is the result:Notice all repeating linear gradient images starting grey and finishing orange.Session Replay for DevelopersUncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data Happy debugging! Try using OpenReplay today. --> --> Session Replay for Developers Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community. Radial GradientsA radial gradient is a type of gradient that radiates out from a central point. In terms of visual effects, a radial gradient can create the illusion of three dimensions by adding a sense of deep and perspective to an image. In addition, you can adjust the properties of a radial gradient to control the appearance of the effect, like direction, shape, and size.Examples of some of the properties that you can specify with this function are:ShapeThe shape can be either circular or ellipse. This radial gradient starts from a single point and radiates outward in a circular or elliptical shape.Example of how it works:DOCTYPE html>html>head>style>.ell { height: 245px; width: 200px; background-color: grey; background-image: radial-gradient(grey, pink, orange);}.cir { height: 245px; width: 200px; background-color: grey; background-image: radial-gradient(circle, grey, pink, orange);}style>head>body>h1>Radial Gradient - Shapesh1>h2>Ellipse:h2>div class="ell">div>h2>Circle:h2>div class="cir">div>body>html>Here. / Premium Dark CSS Linear Gradient Background / .gradient { background: ; background: linear-gradient( to right, , ); } TailwindCSS Linear Gradient / Premium Dark CSS Linear Gradient Background / .gradient { background: ; background: linear-gradient( to right, , ); } TailwindCSS Linear Gradient

Colorful Background with linear-gradient - YouTube

Hi lovely readymag users, I was wondering if it is possible to make the background a gradient with custom code? Hi @arizona,Please find below a couple of ways in which to create background gradient using custom code.METHOD 1.We prefer this method as it’s more robust and doesn’t show up as another element on the project settings. It’s also the best method if you wish to have a gradient for every single page. Please note: this will only display upon preview or upon publishing however.Add the following to the of your project. .mag, .mag-pages-container, .container, .page { height: 100vh; width: 100vw; background-image: linear-gradient(180deg, red, yellow); } .page-fixed-bg-container { display: none !important; }METHOD 2.Add in a code injection element and paste in the following code. Click ‘Save & Close’, then under the position options (the small pin icon on the right hand side’ set the it to full width and full height. #background_gradient { height: 100vh; width: 100vw; background-image: linear-gradient(180deg, red, yellow); }I’ve also linked here a test project with two pages to show both methods in action.``

Background in css with linear-gradient and repeating-linear-gradient

Download Article Download Article Applying a Gradient|Customizing a Gradient|Video|Q&A When making a slideshow presentation on Google Slides, many people make their backgrounds and textboxes a single solid color. However, creating and using gradients on Google Slides can make your presentation stand out.Go to docs.google.com/presentation/ to create or access a slideshow. If asked, log in by entering your email and password and pressing Login.Advertisement To change the theme of your presentation, click Theme... from the menu bar at the top of the screen.Though this isn't mandatory, choosing a theme other than "Simple Light" and "Simple Dark" will give you more color options for making your gradient. Themes come with assigned colors used throughout them, and when making a gradient, you can use the theme colors to match the rest of your slideshow. This opens up the option to either add an image to or change the color of your background. A drop-down menu will appear, automatically selected in the "Solid" option (unless the theme you chose already had a gradient demo background). The "Solid" page will give you an idea as to what colors you can use for your gradient. Click Gradient next to the pre-selected Solid button at the top of the drop-down menu. This takes you to a page with several multicolored and ombre boxes. You can select these to be the background of your presentation. It shouldn't matter whether you click Custom... or the plus sign underneath it - you should be taken to the same page. A menu will open at the middle of the screen with several options: Type, Angle (if on the linear option) or Center (if on the radial option), Gradient Stops, and Preview, along with a color bar at the bottom. A linear gradient will appear ombre and have colors fade into each. / Premium Dark CSS Linear Gradient Background / .gradient { background: ; background: linear-gradient( to right, , ); } TailwindCSS Linear Gradient / Premium Dark CSS Linear Gradient Background / .gradient { background: ; background: linear-gradient( to right, , ); } TailwindCSS Linear Gradient

Linear Gradient in CSS: How to Create Gradient Backgrounds

Div { background-image: linear-gradient (trái, # 999999 0%, #ffffff 100%; } Tiện ích mở rộng trình duyệt cho Gradient tuyến tính CSS3 Để làm cho gradient của bạn hoạt động trên nhiều trình duyệt, bạn cần phải sử dụng các tiện ích mở rộng của trình duyệt cho hầu hết các trình duyệt và bộ lọc cho Internet Explorer 9 trở xuống (thực ra là 2 bộ lọc). Tất cả những yếu tố này đều có cùng các yếu tố để xác định độ dốc của bạn (ngoại trừ việc bạn chỉ có thể xác định gradient 2 màu trong IE). Bộ lọc và phần mở rộng của Microsoft —Internet Explorer là thách thức lớn nhất để hỗ trợ, bởi vì bạn cần ba dòng khác nhau để hỗ trợ các phiên bản trình duyệt khác nhau. Để có được gradient màu xám sang trắng bạn sẽ viết: / * IE 5,5–7 * / bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1); / * IE 8–9 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)"; / * IE 10 * / -ms-linear-gradient (trái, # 999999 0%, #ffffff 100%); Tiện ích mở rộng Mozilla —Ứng dụng -moz- hoạt động giống như thuộc tính CSS3, chỉ với phần mở rộng -moz-. Để có được gradient trên cho Firefox, hãy viết: -moz-linear-gradient (trái, # 999999 0%, #ffffff 100%); Tiện ích mở rộng của Opera —Mở rộng -o- thêm gradient vào Opera 11.1+. Để có được gradient ở trên, hãy viết: gradient -o-tuyến tính (trái, # 999999 0%, #ffffff 100%); Phần mở rộng Webkit —Mở rộng -webkit- hoạt động rất giống với thuộc tính CSS3. Để xác định gradient ở trên cho Safari 5.1+ hoặc Chrome 10+ bạn viết: -webkit-linear-gradient (trái, # 999999 0%, #ffffff 100%); Ngoài ra còn có một phiên bản cũ hơn của phần mở rộng Webkit hoạt động với Chrome 2+ và Safari 4+. Trong đó, bạn xác định loại gradient là một giá trị, thay vì trong tên thuộc tính. Để có được gradient xám trắng với phần mở rộng này, hãy viết: -webkit-gradient (tuyến tính, trái trên cùng, bên phải trên cùng, màu sắc dừng lại (0%, # 999999), màu sắc-stop (100%, # ffffff)); Mã CSS Gradient tuyến tính CSS3 đầy đủ Đối với hỗ trợ đa trình duyệt để có được màu xám đến trắng ở trên, trước tiên bạn nên bao gồm một màu dự phòng cho các trình duyệt không hỗ trợ gradient và mục cuối cùng phải là kiểu CSS3 cho các trình duyệt hoàn toàn tuân thủ. Vì vậy, bạn viết: nền: # 999999; nền: -moz-linear-gradient (trái, # 999999