FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Create a CSS-Ready Gradient Background

As I mentioned before, where possible we should avoid using rasterized images if there is a workable code-based option instead. One of the areas where we can use code is in gradients, which can be reproduced using CSS.

In this lesson, we’ll see how to create a CSS-ready gradient background in Adobe XD that can later be turned into CSS by Avocode.

3.1 Create a CSS-Ready Gradient Background

Hi, and welcome back to Code Friendly Design with Adobe XD. In this lesson we're going to talk about how you can create CSS friendly gradients in your sites instead of using raster-based images. If you use a CSS gradient instead of a raster-based background image, that gradient can then be scaled easily, so that makes it much easier for the site to become responsive and adaptive to different viewport sizes. It's much more easily edited if you wanna make tweaks and feature. Just a couple little changes to card values rather than having to re-export a whole background image. And your file size is gonna be much smaller using CSS versus a background image. You can actually do quite a lot with card base gradients. So you can do linear gradients facing in all different directions. They can be diagonal or they can be just directly horizontal or vertical. You're gonna have multiple stops. This is obviously a program, I'm just demonstrating the functionality but you can actually get some really nice looks with CSS based gradients. And then you can get into a whole bunch of other stuff with stacking gradients on top of each other. You can do radial gradients as well. Radial gradients don't have to be circular. They can be squished up. You can have gradients positioned and offset. So there's a whole bunch of stuff that you can do without needing to use any, raster-based images. We're gonna keep things relatively straightforward here. We're gonna start by just putting together a linear gradient with just two colors stops. Later on we'll do a radial gradient, as well, but for now, we'll just focus on that linear gradient. All right, now, before we do this we're just gonna get rid of a couple of things we don't need here. Just get rid of these rectangles. We'll be creating some proper buttons later. So we'll get those out of the way. Oops, and this panel here, let's break this out of this group. It's gonna make it a little bit easier to align it. And for now, we don't need these measure where they're sitting, so we'll just move them off to the side. Now, we want a panel here that is gonna be 1,200 pixels wide by 515 pixels high. So we're gonna go ahead and draw out that shape. And we're just manually that 515 pixels of height. And while we're at it, we're just going to drag this other panel down so that it's aligned with it at the bottom. We don't need a border, so we're gonna get rid of that. And we're gonna start by just putting the dark color that we selected earlier in as the background color for this panel. I'll just zoom in a little bit. All right, make sure our panel is selected. Now, up here in the fill color picker, if we look at our dropdown list here, and we expand it, we can see that we have a Linear Gradient option and a Radial Gradient option. So we're gonna choose Linear Gradient. So that's left one of our color stops at our dark blue color and just put a default gradient as the other. We can actually change that too dark blue color as well. And now, what we want is for this top color to be lighter, and this bottom color to be darker. And we're gonna make it look like the color is coming of from the top left, and going down to the bottom right. So we're just gonna drag these stops around a little bit to make that happen. Now, so let this stop here and we'll just gonna lighten it up, really socially. Just one really subtle effect. As we know there's a soft light coming down from the top left like with the other colors that we've been through I've already pre-selected this color so set it to 212F3i. Now, I've just got that nice, subtle gradient there. It's not very obvious but if you turn that panel off and on, you can see that it still is quite distinct. So now, we're gonna save this file and we're gonna bring it into Avocode again. Nothing shows up in Avocode that can't be translated into CSS or HTML. So by opening this file up in Avocode, we're gonna be able to verify that the gradient that we've added in is all good for translation into CSS. All right, so here we are in Avocode, here's a gradient that we just set up, everything looks exactly like it did in our design. And if we select this box here, you can see it on the right- Avocode is able to successfully generate this line of code here, which is gonna recreate this gradient just using CSS in the browser. So you can see, just with the one line of code, that's a lot more efficient than having a rasterized image. And at any point, any of the values that are in this line of code here can be changed and the gradient can be adjusted. You can also add multiple stops to your gradient, so just select this. And in order to edit the gradient, you have to have the Color Picker open. So you can hover your mouse along the line, and you'll see a little plus symbol come up. Then you can add a gradient stop there, and you can change that value. So you can add as many gradient stops as you need. We're just gonna keep this to a simple two stop gradient though. So to get rid of a gradient stop that you've added, just go up here, and just drag that gradient stop off. Now, if you've already got a gradient that's linear and you wanna switch it to radial, then just change the selection in the drop down box and it'll automatically convert it into radial gradient. We're gonna do a radial gradient in another panel later, so for now let's just keep that as a linear gradient. All right, so next up, we're gonna start working on our typography and on a couple of buttons. We're gonna create a basic heading, some paragraph text and a couple of buttons on this dark background here. And then we're gonna do the same thing for a light background, which, by the way, we change these two 515 height as well. So there's more typography to be done than just a heading and a paragraph. But this is where we're going to get all the basics of our typography down and finalize our colors. So we're gonna do that in the next lesson. I'll see you there.

Back to the top