How can make a simple border bottom color with gradient color?
div{
border-bottom:10px solid linear-gradient(#FF4000, transparent);
height:20px;
width:auto;
background:#ccc;
}
<div></div>
To set a border gradient on a single border (or multiple borders), you simply need to declare style rules in your CSS for:
border-image
border-image-slice
border-image-width
.box {
width: auto;
height: 20px;
background: #ccc;
border-image: linear-gradient(to right, rgba(255, 64, 0, 1), rgba(255, 64, 0, 0));
border-image-slice: 1;
border-image-width: 0 0 10px 0;
}
<div class="box">
</div>
N.B. The fade-to-transparent gradient is achieved using rgba colors (in place of hex colors).
rgba(255, 64, 0, 0) (with an alpha channel of 0) is the completely transparent equivalent of rgba(255, 64, 0, 1) (which, with an alpha channel of 1, is completely opaque).
Using :after pseudo element and linear-gradient you can get desire results. Here in this code I am using background:liner-gradient on :after pseudo element with just using a one single element.
You may have to use browser prefix as well if you targeting older browsers.
Check Demo as well.
div {
height: 100px;
border: 1px solid red;
position: relative;
}
div:after {
height: 2px;
width: 100%;
position: absolute;
content: "";
left: 0;
bottom: 0;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
<div>Hi</div>
Try like this:
.myClass {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,172)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,172) 50%, rgb(0,255,255) 67% );
padding: 10px;
}
.myClass > div { background: #fff; }
JSFIDDLE DEMO
You can set gradient as border color. But you can do it using another element.
<style>
div {height:20px; background: linear-gradient(#FF4000, transparent); padding-bottom: 10px;}
div div {background: yellow; padding-bottom: 0;}
</style>
<div>
<div></div>
</div>
http://jsfiddle.net/7et1w393/
-webkit-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%)
div {
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
height: 20px;
width: auto;
background: #ccc;
}
<div></div>
Related
I'm trying to replicate the google map's marker that shows user facing direction. It has got a cone/light beam/flash light type of shape where it fades from a color to transparent.
When I google css shapes, this is one of suggested methods for creating a cone shape :
.cone {
height: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #07CAF3;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<div class="cone"></div>
But because it's made of borders, I cannot apply a gradient to it.
Any ideas ?
Use conic-gradient combined with mask:
.box {
width:200px;
height:100px;
border-radius:50%;
background:conic-gradient(from -45deg at bottom,#0000, blue 1deg 90deg, #0000 91deg);
-webkit-mask:linear-gradient(#0000,#000);
}
<div class="box"></div>
OR a radial-gradient one and the conic applied to mask:
.box {
width:200px;
height:100px;
background:radial-gradient(farthest-side at bottom,blue ,#0000);
-webkit-mask:conic-gradient(from -45deg at bottom,#0000, #000 1deg 90deg, #0000 91deg);
}
<div class="box"></div>
The mask idea from #temaniafif is probably the best idea, but you could also have two background-images, and in the radial one play around with the color and the percentage offsets/opacities to get the effect you want:
div {
background-image: conic-gradient(transparent 0deg, transparent 45deg, white 45deg, white 315deg, transparent 315deg, transparent 360deg), radial-gradient(rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.2) 30%, rgba(0, 0, 0, 0.1) 70%, transparent 80%);
background-size: 100% 100%;
width: 75vmin;
height: 75vmin;
border-radius: 50%;
}
<div></div>
Essentially, I want to create an element that combines a "to right" gradient with a color stop at a certain percentage and another color stop for the remaining width with a "to bottom" gradient that fades both colors to transparent. Getting the color stop part is easy, getting the fade is easy; I just can't figure out how to get both.
/*I can get this:*/
div {
width: 500px;
height: 100px;
}
.color-change {
background: linear-gradient(to right, rgb(255, 175,157) 80%, rgb(255, 95, 89) 80%);
}
/*or this:*/
.fade {
background:linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
/* but not both*/
<div class="color-change"></div>
<div class="fade"></div>
This probably isn't hard but I can't find any examples that do exactly this. I could just use a png., but it seems as though this ought to be doable in CSS. Thanks for any suggestions (or better, solutions).
Use CSS ::before (:before)
In CSS, ::before creates a pseudo-element that is the first child of
the selected element. It is often used to add cosmetic content to an
element with the content property. It is inline by default. https://developer.mozilla.org
div {
width: 500px;
height: 100px;
}
.fade {
background: linear-gradient(to bottom, rgba(252, 193, 176, 0), #fcc1b0);
position: relative;
}
.fade::before {
display: inline-block;
content: "";
height: 100%;
width: 20%;
background: black;
position: absolute;
right: 0;
background: linear-gradient(0deg, rgba(246,115,115,1) 4%, rgba(250,192,194,1) 34%, rgba(255,233,234,1) 66%, rgba(255,255,255,1) 100%);
}
<div class="fade"></div>
Multiple background layer can do it:
.color-change {
--p:80%; /* this is your percentage */
background:
linear-gradient(to bottom, transparent, #fcc1b0) left,
linear-gradient(to bottom, transparent, rgb(255, 95, 89)) right;
background-repeat:no-repeat;
background-size:var(--p) 100%,calc(100% - var(--p)) 100%;
width: 500px;
height: 100px;
margin:10px;
}
<div class="color-change"></div>
<div class="color-change" style="--p:50%"></div>
<div class="color-change" style="--p:20%"></div>
Or you can mask it with a pseudo element. This is real transparent.
body {
background: dodgerblue;
}
div {
width: 500px;
height: 100px;
}
.color-change {
-webkit-mask: linear-gradient(to bottom, transparent, #000);
mask: linear-gradient(to bottom, transparent, #000);
position: relative;
}
.color-change:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(255, 175, 157) 80%, rgb(255, 95, 89) 80%);
}
<div class="color-change"></div>
I want to css code with gradient top transparent color. can you please check below is it correct.?
background-color: transparent;
background-image: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
bottom: 0;
content: " ";
display: block;
height: 150px;
position: absolute;
width: 100%;
z-index: 8;
I suggest you to use just background property for your purpose if i undetstood it correctly.
.example {
background: linear-gradient(to top, #f2f2f2, rgba(242, 242, 242, 0));
}
Cause you use second color with opacity: 0 (last parameter in the rgba function) you'll have gradient effect to transparent.
I want to create the background image of the attached div element with CSS (or SVG).
div.target {
background-image: linear-gradient(
to right bottom,
transparent 50%,
#00BCD4 50%
);
Background image of the div element I want to create with CSS (or SVG)
We can do this using multiple background image gradients like in the below snippet. The darker shade is assigned as the background color to the element. Then two background image layers created using gradients are placed in such a way that they produce the desired effect. Adding a partially transparent layer of white color above the darker shade will produce a lighter shade.
The background-size of the second layer should be smaller and its background-position should be at the left-bottom side of the element.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%);
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
Angled CSS gradients are known to produce slightly jagged (or uneven or rough) edges and that can be avoided by offsetting the color stop point a bit like in the below demo.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px)), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px));
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
You can do this with :before and :after pseudo elements.
div {
position: relative;
width: 500px;
height: 100px;
background: #0BC7BE;
}
div:after {
position: absolute;
border-style: solid;
border-width: 0 0 100px 500px;
border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
right: 0;
top: 0;
content: "";
}
div:before {
position: absolute;
border-style: solid;
border-width: 50px 0 0 70px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
left: 0;
bottom: 0;
content: "";
}
<div></div>
I have this gradient:
div {
height: 100px;
width: 100px;
background: linear-gradient(-60deg, transparent 63%, white 63%),
linear-gradient(60deg, transparent 63%, white 63%),
linear-gradient(to top, blue, blue);
}
I want to know a) how do I flip it so it's coming from the top and b) how to rewrite without the third part (to top, blue, blue) since I just want a single color and it seems wrong this way.
For the first part, you can try this
div {
height: 100px;
width: 100px;
background: linear-gradient(120deg, transparent 63%, white 63%),
linear-gradient(-120deg, transparent 63%, white 63%),
blue;
}
For the second part, try this
div {
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
Hope this will help you ..
This can be achieved with just two linear-gradient images by setting the appropriate background-size and background-position for the images (like in the below snippet).
div {
height: 100px;
width: 100px;
background: linear-gradient(to top right, transparent 49.5%, blue 50.5%),
linear-gradient(to top left, transparent 49.5%, blue 50.5%);
/* the difference in color stops is to produce smoother edges */
background-size: 50% 95%; /* X size should be 50%, Y size can be as you wish */
background-position: left top, right top; /* don't change */
background-repeat: no-repeat; /* don't change */
}
/* just for demo */
div {
border: 1px solid;
display: inline-block;
vertical-align: bottom;
}
div:nth-child(2), div:nth-child(4) { width: 150px; }
div:nth-child(2), div:nth-child(3) { height: 150px; }
<div></div>
<div></div>
<div></div>
<div></div>
I've changed the gradient to the to [side] [side] syntax because it helps in achieving responsive output. (You can refer to this answer of mine for a detailed explanation about why that change helps.)
In the below snippet, I've given two different colors for the gradient so that you could visually see what is happening.
div {
height: 100px;
width: 100px;
background: linear-gradient(to top right, transparent 49.5%, blue 50.5%), linear-gradient(to top left, transparent 49.5%, green 50.5%);
background-size: 50% 95%;
background-position: left top, right top;
background-repeat: no-repeat;
}
<div></div>