Can someone show me how to make a linear gradient border?

HTML & CSS
1

Using this as an example:

How would I create the image above using this method below?

<div style="width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;"></div>

It would be set up using a code that looks like this:

border-image: linear-gradient(to top left, #3acfd5 0%, #3a4ed5 100%);
2

Something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
.box {
	width: 250px;
	height: 250px;
	margin: auto;
	background: #000;
	border: 5px solid transparent;
	border-image: linear-gradient(to right, #3acfd5 0%,#3acfd5 60%, #3a4ed5 61%, #3a4ed5 100%);
	border-image-slice: 1;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>

You can inline it yourself :slight_smile:

If yo meant to have white in there then add it into the mix something like this:

border-image: linear-gradient(to right, #3acfd5 0%,#3acfd5 61%, #3acfd5 61%, #fff, #3acfd5 63%, #fff,  63%, #3a4ed5 100%);
4 Likes
3

How do I make the white line 5px in length?

<div style="width: 250px;
    height: 250px;
    margin: auto;
    background: #000;
    border: 2px solid transparent;
    border-image: linear-gradient(to right, #f0f 0%,#f0f 61%, #3acfd5 61%, #fff, #3acfd5 63%, #0ff,  63%, #0ff 100%);
    border-image-slice: 1;"></div>
4

This seems to work:

border-image:linear-gradient(to right, #3acfd5 0px,#3acfd5 150px, #fff 150px, #fff 155px, #3a4ed5 155px, #3a4ed5 100%);
2 Likes
5

How would I change the numbers to these?

Pink 128px top/bottom

White 7px top/bottom

Teal 65px top/bottom

border-image:linear-gradient(to right, #f0f 0px,#f0f 150px, #fff 150px, #fff 155px, #0ff 155px, #0ff 100% );

6

I got it.

<div style="width: 196px; height: 196px; background: #000; border: 2px solid transparent; border-image:linear-gradient(to right, #f0f 0px, #f0f 128px, #fff 80px, #fff 136px, #0ff 136px, #0ff 100% ); border-image-slice: 1;"></div>
1 Like
7

Is there a way to remove the blending/shading of the color?

border-image:linear-gradient(to right, #f0f 0px, #f0f 128px, #fff 80px, #fff 136px, #0ff 136px, #0ff 100% );


Where the white goes over the teal, that part should just be teal, same with the white over the pink, that should just be pink.

8

Keep the lengths ascending but not overlapping, and touching where the colors change.

You have written: 0 - 128, 80 - 136, 136 - 100%;
80px is before 128px.

Like this: 0 - 128, 128 - 136, 136 - 100%; /* or however long you want the segments to appear */

2 Likes
9

Can you put it on jsfiddle for me, cause I don’t get it.

<div style="width: 196px; height: 196px; background: #000; border: 2px solid transparent; border-image:linear-gradient(to right, #f0f 0px, #f0f 128px, #fff 80px, #fff 136px, #0ff 136px, #0ff 100% ); border-image-slice: 1;"></div>
10

It looks to me like 80px is out of place in your linear-gradient: If I change it to 128px, it works.

border-image:linear-gradient(to right, #f0f 0px, #f0f 128px, #fff 128px, #fff 136px, #0ff 136px, #0ff 100%);
11

When I zoom in, it still looks like this.


There’s no way to prevent the overlapping?

inear-gradient(to right, #f0f 0px, #f0f 128px, #fff 128px, #fff 136px, #0ff 136px, #0ff 100% ); border-image-slice: 1;
12

I believe that the antialiasing that you are seeing is a function of the operating system. I can’t zoom anything large enough to duplicate your zoomed image size, but what I DO see when I zoom to max is pixel sharp with no antialiasing. So my answer to your question is that what you are seeing is not being caused by the code but maybe by the operating system and maybe by the browser or both… especially if scaling of the images is involved. If you have a high rez monitor and set your video card to display at 125% (larger than normal), then it is very likely expected antialiasing.

I happen to be be using a low rez monitor (80dpi) on which I can count pixels if I wish with no video card or Windows zooming and I see absolutely sharply defined differences between the colors… no faded or blended colors.

I think you wish to achieve a degree of consistency between computers that doesn’t exist. That much consistency is not possible in the real world.

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.