Creating gradient lines in CSS

Question

Question, if I wanted to create gradient lines that fade out on the top and bottom, similar to the lines seen on AT&T's drop down menu that separate the menu items, how would I go about that? I want to create a similar effect on a menu that I am coding, and I would prefer not to use images. Is there a way to achieve this in CSS? Help much appreciated! Thanks.

can you show us your html code , eventually what you already started , so we see where you get stucked — G-Cyrillus
– G-Cyrillus, Commented Jun 20, 2013 at 19:13

Derek Story · Accepted Answer · 2013-06-20 19:13:58Z

3

Microsoft CSS Gradient is a GUI you can use. just copy the CSS into your code:

Example:

#div {
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}

answered Jun 20, 2013 at 19:13

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karl-André Gagnon · Accepted Answer · 2013-06-20 19:18:26Z

You can create a div with 1px width then assign a gradient on it. Like that :

.line{
    width:1px;
    height : 25px;
    margin : 0 5px;

    background: rgb(125,185,232);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );

}

Fiddle : http://jsfiddle.net/jPnXz/

Here a CSS gradient generator (i used it for the CSS) : http://www.colorzilla.com/gradient-editor/

Victor · Accepted Answer · 2013-06-20 19:26:54Z

1

Great documentation on CSS3 Gradients

Gradient Generators

answered Jun 20, 2013 at 19:26

Victor

22.4k15 gold badges101 silver badges115 bronze badges

Comments

G-Cyrillus · Accepted Answer · 2013-06-20 20:04:03Z

0

You have repeating-gradient as well for this :

http://codepen.io/anon/pen/zbLkl

  background:repeating-linear-gradient(
    top , 
    white 0, 
    white 1em,
    turquoise 1em,
    turquoise  1.2em) 0  2.4em;

    line-height:1.2em;

Set equal line-height to gradient , so gradient will follow font-size.

the time to dig it, an old example with squares. and background-size.http://dabblet.com/gist/4750827

background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;

edited Jun 20, 2013 at 20:04

answered Jun 20, 2013 at 19:33

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Comments

sakthi sudhan · Accepted Answer · 2018-07-11 10:50:37Z

0

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px; 
    background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>

<h1>Linear Gradient</h1>


<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>

answered Jul 11, 2018 at 10:50

sakthi sudhan

1751 silver badge7 bronze badges

Collectives™ on Stack Overflow

Creating gradient lines in CSS

5 Answers 5

Comments

Comments

Great documentation on CSS3 Gradients

Gradient Generators

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Great documentation on CSS3 Gradients

Gradient Generators

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related