How would I make the radius 200px in width and height? I've read that this can be done in pixel units, but every attempt has failed.
background-image: -webkit-radial-gradient(75% 100%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -o-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -ms-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%)
background-image: -moz-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
edit: Updated for modern syntax, I've left the original below for a record of the 2011 syntax
You can set both the radius and position the gradient in pixel values or any other valid length unit.
In the example below circle at 200px 200px is setting the center point of the circle to 200px across and 200px down, this could also be any value accepted by background-position such as left or top.
The next values are the color stops and are comma separated pairs of color length. Again any valid value of color and length would work red 10%, #333 10px and rgb(10,47,10) 1em would all be valid.
Values like px or em are absolute and percentage values would be relative to the gradient container.
.gradient-demo {
width: 500px;
height: 400px;
background: radial-gradient(circle at 200px 200px, #fff 0px, #fff 100px, #ff7ae9 101px);
}
<div class="gradient-demo"></div>
Original Answer:
background-image: -moz-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -webkit-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -o-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -ms-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
In this example the '200px' is the size of the circle, any standard
CSS units such as px, em or percentages are fine.
The '50px 100px' is the position of the centre of the circle, it works
the same way as background-position so values like 'left top' are
fine too.
There are a few online generators that can help you with all the
vendor specific prefixes.
p.s. #Mohsen pixel values are fine, MDN says:
either a percentage between 0% and 100% or a length along the gradient axis
If you click on 'length' it says
The CSS syntax for length is a number followed immediately by a unit. Space between the number and the unit is not allowed.
Related
It seems to be damn-near impossible to style a <meter> HTML element to any interesting degree, so I am emulating a meter using CSS.
I have a step-wise gray linear gradient I want to use for the "unfilled" right-hand portion of the meter
background-image: linear-gradient(
to right,
#ddd 20%,
#ccc 20%,
#ccc 40%,
#bbb 40%,
#bbb 60%,
#aaa 60%,
#aaa 80%,
#999 80%,
#999 100%
);
and a step-wise green-ish gradient I want to use for the "filled" left-hand portion of the meter.
background-image: linear-gradient(
to right,
#70f600 20%,
#0e0 20%,
#0e0 40%,
#0d0 40%,
#0d0 60%,
#0c0 60%,
#0c0 80%,
#0b0 80%,
#0b0 100%
);
The effect I want is that
at 0% full meter, the styled meter will be the gray step gradient alone;
at 100% full meter, the styled meter will be the green step gradient alone;
at some intermediate percent (0% < X < 100%) full meter, the leftmost X% of the styled meter will be the leftmost X% of the green step gradient, and the remaining rightmost space of the styled meter will be the corresponding rightmost space of the gray step gradient. For example:
at ~36% fill
at ~82% fill
crucially, neither step gradient should be horizontally compressed to fit into the available space.
This last bulletpoint is what I am struggling to achieve.
My current best effort is the following HTML and CSS (to produce, in this case, a 36% filled meter):
HTML
<div class="meter-gauge">
<div class="negative-space" style="width: calc(100% - 36%)"/>
</div>
CSS
.meter-gauge {
position: relative;
display: inline-block;
height: 1em;
min-width: 10em;
background-image: linear-gradient(
to right,
#70f600 20%,
#0e0 20%,
#0e0 40%,
#0d0 40%,
#0d0 60%,
#0c0 60%,
#0c0 80%,
#0b0 80%,
#0b0 100%
);
}
.negative-space {
position: absolute;
top: 0;
right: 0;
height: inherit;
width: 0; /* Overridden by style attribute */
background-image: linear-gradient(
to right,
#ddd 20%,
#ccc 20%,
#ccc 40%,
#bbb 40%,
#bbb 60%,
#aaa 60%,
#aaa 80%,
#999 80%,
#999 100%
);
z-index: 1;
}
Here, unlike the desired meter styling, displayed earlier, we get a version where the gray step gradient is horizontally compressed to fit 100% of the gradient into 64% of the space.
For comparison, an 82% filled meter with the above CSS looks like this, where the issue is even more obvious:
How can I achieve the look I want, and avoid one of the two gradients being included in its entirety but horizontally squashed into the available space?
I have noted that the effect I want would have been possible to achieve if the two gradients were instead two image files, as demonstrated by this image comparison slider demo. This seems to be because the image files are defined with absolute widths, and are then scaled as necessary. The gradients on the other hand are defined only using percentages, which relate only to the width of the containing block, not that block's parent block width.
Note: I don't want to use absolute CSS size units, as I want to be able to plug this styled meter in anywhere, at any size.
How about using clip-path?
Example code
.gauge {
width: 30em;
height: 2em;
position: relative;
background-color: #ccc;
}
.gauge > * {
width: 100%;
height: 100%;
position: absolute;
}
.meter-gauge {
background-image: linear-gradient(to right,
#70f600 20%,
#0e0 20%,
#0e0 40%,
#0d0 40%,
#0d0 60%,
#0c0 60%,
#0c0 80%,
#0b0 80%,
#0b0 100%);
}
.negative-space {
background-image: linear-gradient(to right,
#ddd 20%,
#ccc 20%,
#ccc 40%,
#bbb 40%,
#bbb 60%,
#aaa 60%,
#aaa 80%,
#999 80%,
#999 100%);
clip-path: inset(0 0 0 30%);
}
<div class="gauge">
<div class="meter-gauge"></div>
<div class="negative-space"></div>
</div>
How it works
clip-path: inset(top right bottom left)
Just have a couple of elements, or pseudo elements, with the green on top of the gray.
Green one has clip-path:
clip-path: polygon(0 0, var(—pc) 0, var(—pc) 100%, 0 100%);
Where —pc is percentage required e.g 36%
Sorry I can’t give a proper snippet as am stuck on an iOS device.
I have a bit of a complex layout. Looking for a solution for the text module. Need a dashed border with a trapezoid like shape. The shape has an opaque background and sits on top of the imagery. I have not been able to do a clip path for the trapezoid and keep the gradient dashed border as it clips it off.
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
border-width: 1px;
border-style: dashed;
border-image: linear-gradient(90deg, #ff7075 0%, #fed42e 17%, #4ec253 33%, #08b2ba 50%, #45559e 65%, #2b3570 83%, #25366c 100%) 1
A CSS linear gradient background element has fuzzy transitions between colours even when the stops are at the same spot.
I have an element with the background defined like so:
background:linear-gradient(to right,
blue, blue 10%,
red 10%, red 30%,
yellow 30%, yellow 40%,
green 40%, green 50%,
black 50%
);
In Firefox, the transitions between the colours are fuzzy. If I use a repeating-linear-gradient the edges are crisp. Both are crisp in Chrome.
I have an example pen here: https://codepen.io/anon/pen/rPVWZE?editors=1100#0
Any ideas on how to fix this?
Here the effect on FF. I drew some pixels to show zoom level:
A workaround:
.linear{
height:100px;
background-image:
linear-gradient(to right, blue 0, blue 100px),
linear-gradient(to right, red 0, red 100px),
linear-gradient(to right, yellow 0, yellow 100px);
background-size:
100px 100px,
100px 100px,
100px 100px;
background-position:
0 0,
100px 0,
200px 0;
background-repeat: no-repeat;
}
<div class = "linear"></div>
html {
background:#ffffff;
}
body {
height:250px;
background: linear-gradient(
to bottom,
#ffffff 0px,
#ffffff 100px,
#0065A2 100px,
#0065A2 145px,
#074A8B 145px,
#074A8B 163px,
#0065A2 163px,
#0065A2 203px,
transparent 203px
);
}
I am trying to use a background linear gradient and with great surprise it works good on Firefox and IE but not on Google Chrome.
The code is here for example: https://jsfiddle.net/be1rgpez/1/
background: linear-gradient(
to bottom,
#ffffff 0px,
#ffffff 100px,
#0065A2 100px,
#0065A2 145px,
#074A8B 145px,
#074A8B 163px,
#0065A2 163px,
#0065A2 203px,
transparent 203px
);
I need a linear gradient with several color stops, but using Google Chrome it renders a strange shadow between colors (see image left box). The effect I need is "striped" without shadows).
In the attachment I show what I see using Chrome. The left box is what I need but without the shadows (like in the right box). The same jsfiddle renders correctly on Firefox and IE.
UPDATE: this is a zoomed picture. As you can see, the left box has a small shadow between the white and the blue color (and also between other colors).
try this code:
.left {
background: linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
background: -webkit-linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
}
.right {
background: linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
background: -webkit-linear-gradient( to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px);
}
I found that there's an issue between linear gradient and containers overflow.
I tried many solutions and it didn't work.
Then when i tried to give overflow:auto, it worked for me.
this is before i apply the fix to the right container which holds many content
this is after applying the overflow: auto !important; to the right container
and it works fine now without any issue and here it is.
You have defined the same starting points two times for different colors. The below code without the duplicates looks fine:
.left {
background: linear-gradient(
to bottom,
#ffffff 0px,
#0065A2 100px,
#074A8B 145px,
#0065A2 163px,
transparent 203px
);
}
How would I create the below image using only CSS?
I'm attempting to draw a line with a transparent gradient at either end - here's what I've tried which does not work:
background-image: -webkit-linear-gradient(left, transparent, #8C8C8C),
-webkit-linear-gradient(right, transparent, #8C8C8C);
So at the left and right end of the line the gradient moves inwards.
You should just use a single gradient like in the below snippet with the start and end as transparent.
Explanation:
transparent 0% means the gradient starts with transparent color
#8C8C8C 15% means that between 0% to 15% the gradient's color gradually changes from transparent to #8C8C8C.
#8C8C8C 85% means that the gradient's color stays as #8C8C8C from 15% to 85%.
transparent 100% means that the gradient's color would again change gradually from #8C8C8C to transparent between 85% - 100%.
The color stops create the illusion as though the gradient is proceeding inwards from either direction. Equal splits make the change look equal on either side.
div {
background-image: -webkit-linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
background-image: linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
height: 2px;
}
<div></div>
The various color stop values can help achieve that effect.
Stop the white at 10% and prolong a mix of transparent and gray(increasing) up to 50% and then a mix of gray and transparent(increasing) up to 100%.
.gradient {
width: 600px;
height: 1px;
background: linear-gradient(to right, transparent 10%, gray 50%, transparent 100%);
}
<div class="gradient"></div>
Also, you can play around with the % values to get the exact gradient. For example, your image can be made as accurate as possible by increasing the stop points like below.
.gradient {
width: 600px;
height: 1px;
background: linear-gradient(to right, transparent 10%, gray 20%, gray 90%, transparent 98%, transparent 100%);
}
<div class="gradient"></div>