Simple gradient background css2/22/2024 ![]() ![]() , last-color) By default, shape is ellipse, size is farthest-corner, and position is center. background-image: radial-gradient(shape size at position, start-color. To create a radial gradient you must also define at least two color stops. ![]() From left to right, the three gradients above were created with the following code. A radial gradient is defined by its center. There are a few different ways you can do this. Declaring a direction before your colors tells your browser which way your gradient transitions in. The default orientation of a gradient is top to bottom. Here’s a few ways you can customize it: Gradient directions What I’ve shown above, declaring two colors in your code, is the minimum amount of information you need to give to make a CSS gradient. This will create a vertical gradient starting with color 1 at the top and color 2 at the bottom. When you’re writing this, make sure that color 1 and color 2 are the same for all lines of code. The comments, marked by /* comment text*/ aren’t part of the code, but tell you what that line of code does. Substitute color1 and color2 for your colors of choice, either a recognized color name or hexadecimal code, and separate your two colors with a comma. The code is written this way: background: color1 /* For browsers that do not support gradients */īackground: -webkit-linear-gradient( color1, color2) /* For Safari 5.1 to 6.0 */īackground: -o-linear-gradient( color1, color2) /* For Opera 11.1 to 12.0 */īackground: -moz-linear-gradient( color1, color2) /* For Firefox 3.6 to 15 */īackground: linear-gradient( color1, color2) /* Standard syntax */ In order to make sure our code works in every situation, we write multiple lines of code that do the same thing but may be written slightly differently, as well as a failsafe that sets your color to a solid color for browsers that don’t recognize CSS gradients.Ī linear gradient smoothly transitions one color to another in a straight line. ![]() Additionally, the different browsers sometimes interpret code slightly differently (think of it as having to speak different dialects to each one). Browser supportĪ quick note before we start: CSS gradients is a feature that was introduced somewhat recently, which means that older versions of browsers (my grandma’s clunky laptop that hasn’t been updated since 1997) might not recognize and support the code. Gradients can give your web design a sophisticated look and creating them in CSS rather than using an image reduces download time and bandwidth usage of your website. You’ll be able to do this with beginner skills in HTML and CSS and apply it to any element where you might use background or background-color. It’s called linear because the colors flow from left-to-right, top-to-bottom, or at any angle you chose in a single direction. Hi! This tutorial will go over how to create gradients with CSS. Perhaps the most common type of CSS gradient we see in web design is the linear-gradient (). ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |