Generating a css gradient with single color - css

I am trying to generate a gradient using one single color and then varying the brightness or some other related variable.
Is it possible to do so ?

Use a back/white layer on the top of your single color as a gradient
html {
background:
linear-gradient(to right,rgba(255,255,255,0.5),rgba(0,0,0,0.5)),
red; /* here is your single color */
}

yes you can by use "transparent" as a color
background: linear-gradient(transparent, #9198e5);

You can use alpha channel for this purpose. Consider color "#428383":
div {
background-color: #428383; /* for browsers without gradient support */
background: linear-gradient(#42838344, #428383ff);
width: 100px;
height: 100px;
}
<div></div>

You can use RGBA
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.3) 100%);
0.3 will dim the color
If you want to add stop points at 0%, 30%, 100% with three different brightness
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.4) 30%, rgba(2,0,36,1) 100%);

If you want to vary brightness or saturation of a single color, you may be better of using hsl() instead of hex or rgb values:
.gradient {
width: 200px;
height: 100px;
background: linear-gradient(hsl(193,82%,56%), hsl(193,82%,26%));
}
<div class="gradient"></div>
HSL stands for Hue, Saturation and lightness or luminance and is just another way of describing a color. This way you can easily alter saturation and brightness without actually altering the colors hue. Read more here: https://en.wikipedia.org/wiki/HSL_and_HSV

Related

Is there a solution to set a linear gradient using one color

On my project, users have the possibility to select an accent color for their profile page (var(--color-main)). Is there a possibility to create a gradient background using only that main color, for example by using the main color + a % applied to this color to make it darker (or lighter) and use this as second color to make the gradient. Is that possible?
.TabsHeader-module--wrapper--BMiDm .TabsHeader-module--bgBlock--qXkLH {
background-color: var(--color-main);
border-radius: 0 0 20rem 0;
height: 21.6rem;
position: absolute;
top: 0;
width: 100%;
}
This is an example with two custom properties defined:
--color is your main color
--alpha is the opacity quota (0-1) applied to --color for having the second gradient color
The background-image style attribute is set using a gradient shading from --color to --color(alpha)
That was made possible with rgba to define colors MDN
:root {
--color: 240, 0, 0;
--alpha: .5;
}
.gradient{
background-image:
linear-gradient(
to right,
rgba(var(--color), 1),
rgba(var(--color), var(--alpha))
);
width: 100%;
height: 200px;
text-align: center;
}
<div class="gradient"></div>
I have found that you can use variable colors with opacity control only if you give the value as RGB decimals, which are 3 numbers (e.g. 240, 240, 240). And later you can give it a 4th value, which will control the opacity of the color (i.e. will make it darker or lighter).
Here is an example:
:root {
--color: 190,190,190;
}
div {
background: linear-gradient(to right, rgba(var(--color), 0.8), rgba(var(--color), 0.3));
}
Thanks to Thankful Teira from codegrepper.com

Differentiating background-color based on browser support of CSS properties

I have created a polka dotted background in pure CSS via:
.polka-gr{
background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
<div class="polka-gr" style="background-color:#77FFD1;width:600px;height:200px;></div>
As you can see, the background color is a greenish shade (of hex value #77FFD1).
Some of the clients this code is being served to do not support radial-gradient (e.g. those using Opera Mini browser). All such clients currently fall back to a plain #77FFD1 background without polka dots. Fair enough.
But is there any pure CSS way to get these non-supporting browsers to fall back to a different color entirely, e.g. #FFFF99?
Supporting browsers should still see the greenish background-color (#77FFD1) with polka dots.
Is such an arrangement possible? If so, an illustrative example would be great.
.polka-gr{
background: yellow;
}
#supports (background: radial-gradient(#F1C3CB 20%, transparent 0)) {
.polka-gr{
background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-color:#77FFD1;
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
}
<div class="polka-gr" style="width:600px;height:200px;></div>
To target different browsers you can use #supports
https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
In your case:
#supports (background: radial-gradient(white, black)) {
/* relevant styles here */
}

Multiple perfect circles in CSS

I am trying to make a simple shape in css that has 6 circles inside a rectangle. No problem with the basic shape except that my circles edges are not very smooth. Can anyone help with this as it looks a bit 8bit gamer at the moment
http://bootply.com/98298
You have a slight mistake in the syntax, the color stops should state increasing percentages.
The browser handles 2 stops of 95% - 10% as 95% - 95%; the 10% is not valid.
You can get a non pixelated edge by setting a little zone for the transition, say from 95% to 97%
your code
.panel {
background-color: #E67E22;
border-color: #E67E22;
color: #ffffff;
padding: 10px;
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 10%);
background-size: 34% 50%;
min-height: 100px;
}
more correct code
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 95%);
or
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 97%);
The first case makes a sharp change at 95%; the later makes a smoother change between 95% and 97%.
Note anyway that the syntax that you used is sometimes used, when you want a sharp transition, to somehow indicate "lower than the preceding stop".

Generate a saturation/brightness mask using gradients

I would like to know if it's possible to generate a mask of saturation+brightness that are used in color pickers for instance (something like http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png) but using only linear-gradient in css3 ?
I tried severals things, such as :
background: linear-gradient(to right, hsla(0,100%,0,0) 0%, hsla(0,0%,0%,.5) 100%), /* saturation mask */
linear-gradient(to top, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%), /* lightness mask */
but I can't make something like the picture, can't find the right combinaison, and because I don't fully understand, I don't know if it's possible.
Thanks
It is maybe the way you write it.
for the image, 1 gradient + a background-color will do.
you did not close correctly you rules , one value is still expected 100%) , /* li
:)
this could be it :
ele {
background:
linear-gradient(0deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat left ,
white linear-gradient(180deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat right;
background-size:95% 100%, 5% 100%;
}
http://codepen.io/anon/pen/ubDsr (gradient covers body)
You had your gradients reversed and some incorrect hsla values.
Just use hex notation, it's easier in this case:
background-image:
linear-gradient(to top, #000 0%, transparent 100%), /* lightness*/
linear-gradient(to right, #fff 0%, transparent 100%); /* saturation */
Here's a demo where you can compare the result with an image-based solution (normal = gradients, hover = Bootstrap Colorpicker).

Why does light($color,50%) parse to white?

This sass snippet:
$red: #f00
$lightred: lighten($red, 50%)
body
background: $lightred
Is parsed to:
body {
background: white; }
If you instead do 45% instead of 50%, it seems to work as expected:
$lightred2: lighten($red, 45%)
...
background-color: #ffe5e5
Why is this turning into white instead of the expected 50% of red?
You can see it in action here http://tinkerbin.com/OefelPoi
(Note - the save function seems to have a bug, on the css area, select Sass Old Syntax again, and rerun)
Update -
Ends up what I wanted was to mix in white with the original color to get a tinted shade:
mix($color,white, 10%)
Because lighten function is described on HSL colors and your red color #f90 is translated as hsl(0, 100%, 50%)
so lighten($lightred, 50%) is equal to hsl(0, 0, 100%), or white

Resources