Is it possible to generate a gradient similar to this style of color picker? Where the full saturated, 50% brightness values are on the outside, and towards the inside it goes to 100% brightness.
https://i.imgur.com/UlssX5h.jpg
Here you go.
html, body {margin:0; width:100%; height:100%; background: black}
.colorpicker {
width:100vmin; height:100vmin; margin:0 auto;
border-radius:100%;
background:
linear-gradient(0deg, #00F, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(60deg, #0FF, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(120deg, #0F0, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(180deg, #FF0, rgba(255, 255,255,0), rgba(255, 255,255,0))
, linear-gradient(240deg, #F00, rgba(255, 255,255,0), rgba(255, 255,255,0))
, #FFF linear-gradient(300deg, #F0F, rgba(255, 255,255,0), rgba(255, 255,255,0))
}
<div class="colorpicker"></div>
Related
I wrote CSS to show grid patterns like this:
background-image {
repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px ),
repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px )
}
But after production build on Next.js, this was replaced with:
background-image {
repeating-linear-gradient(0deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px),
repeating-linear-gradient(90deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px)
}
And the grid pattern doesn't show on the page.
Is there any solution to disable this convert?
Solved to change deg to to of gradient syntax. Still use hsla but the results are same.
background-image: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.43) 0px 1px,
transparent 1px 20px
),
repeating-linear-gradient(
to left,
rgba(255, 255, 255, 0.43) 0px 1px,
transparent 1px 20px
);
This question already has answers here:
Apply background-size to individual layer of a multiple background
(1 answer)
CSS3 Backgrounds - multiple background-size properties
(1 answer)
Closed 3 years ago.
I have a texture that I want to use as a repeatable background image. I want the background to also contain a gradient overlay on top of the image so that the background fades out to solid white. I was able to get that working like this:
.texture {
width: 100%;
height: 500px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
}
<div class="texture"></div>
The problem is that I would like to make the texture smaller, so I added a background-size in order to accomplish that, but that seems to screw up my gradient overlay as seen below:
.texture {
width: 100%;
height: 500px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
background-size: 100px 100px;
}
<div class="texture"></div>
Is there any way to resize the background image without affecting the way the gradient overlay works?
You can define a different background size for each background image:
.texture {
width: 100%;
height: 500px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
background-size: auto, 100px 100px;
}
<div class="texture"></div>
I'm trying to get a background color on part of some tds, so that it looks similar to a progress bar background:
From left to somewhere in the middle, it's colored, and after that percentage, it's white.
And if it's 100%, of course, the whole td is colored.
The color, a linear-gradient, is the same on all tds, but the length will differ. I only have 3 lengths:
30%
70%
100%
Also 0%, but it's just empty then, so this is out of the question
For this, I'm using a specific class for each variation, .progress_**.
Every class has two linear-gradients on the background property.
This is my current working CSS:
.progress_30 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 30%
),
linear-gradient(to right, yellow, green)
;
}
.progress_70 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 1) 70%
),
linear-gradient(to right, yellow, green)
;
}
.progress_100 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 100%,
rgba(255, 255, 255, 1) 100%
),
linear-gradient(to right, yellow, green)
;
}
As you can see, there is a lot that repeats.
I want at least to put the color in a separate .progress class, so it can be changed easily without altering the lengths, and so I can add or alter some lengths without touching the colors in the future.
So I tried this:
.progress {
background: linear-gradient(to right, yellow, green);
}
.progress_30 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 30%
)
;
}
.progress_70 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 1) 70%
)
;
}
.progress_100 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 100%,
rgba(255, 255, 255, 1) 100%
)
;
}
This doesn't fully work: the white part on the right is the correct length. But on the left, I don't see my linear-gradient, only the page's background color (which isn't white).
Is there a way I can get as few repetitions as possible in CSS, at least have the linear-gradient's color set only once, or do I have to do it like in my first example?
You can rely on background-size and keep the gradient declaration within the same class:
div {
min-height: 50px;
}
.progress {
background:
linear-gradient(#fff, #fff) right no-repeat,
linear-gradient(to right, yellow, green);
}
.progress_30 {
background-size: 70% 100%, auto;
}
.progress_70 {
background-size: 30% 100%, auto;
}
.progress_100 {
background-size: 0% 100%, auto;
}
<div class="progress progress_30"></div>
<div class="progress progress_70"></div>
<div class="progress progress_100"></div>
You can simplify more using CSS variable in case you want to consider more percentage values:
div {
min-height: 50px;
}
.progress {
background:
linear-gradient(#fff, #fff) right/calc(100% - var(--p,50%)) 100% no-repeat,
linear-gradient(to right, yellow, green);
}
<div class="progress" style="--p:30%"></div>
<div class="progress" style="--p:68%"></div>
<div class="progress" style="--p:80%"></div>
<div class="progress" ></div>
This question already has answers here:
How to apply a CSS gradient over a text, from a transparent to an opaque colour
(3 answers)
Closed 3 years ago.
Is it possible to achieve this with just one div (no background images/foreground images/layers)?
Example on codepen: http://codepen.io/anon/pen/sbHAc/
Relevant CSS
ol {
border : 1px #d8d8d8 dashed;
position : relative;
}
ol:after {
content : "";
position : absolute;
z-index : 1;
bottom : 0;
left : 0;
pointer-events : none;
background-image : linear-gradient(to bottom,
rgba(255,255,255, 0),
rgba(255,255,255, 1) 90%);
width : 100%;
height : 4em;
}
Resulting effect
if the browser supports the pointer-events property (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.
I (personally) find that using a secondary element as an "overlap" works pretty well. I do this by defining a new tag. This makes it really easy to add the desired fade out effect to any element you want using <fade/> at the end.
div {
position: relative;
}
fade {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
height: 50px;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.9)
100%);
}
<div>
text
<br>
text
<br>
text
<fade/>
</div>
Giving the fade element an absolute position with a gradient background works just as expected. As long as you remember to set the parent's position to relative.
<style>
.fade {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
</style>
Here is an example for you http://jsfiddle.net/nrgx7/
I'm trying to get a background for some text that is dual-tone, or the top half is one color and the bottom half is another. I have attached a link to a picture of what this should look like. Any ideas on how I can achieve this? Thanks, in advance, for the help!
Michael
http://michaelphillips.dropmark.com/12339/296433
Three ways come to mind:
One: Most Cross Browser (CSS1): Make a 1px wide image of the two colors, probably about 30px tall for each color, then
<span class="duoTone">wrap your text in a span</span>
and set the
.duoTone {background-image: url(path/to/your/img.jpg) left center repeat-x;}
Two: Less friendly to older browsers (CSS2): Same span wrapper as above but with this css (see fiddle).
.duoTone {
position: relative;
}
.duoTone:before,
.duoTone:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: -1;
background-color: #bbbbbb;
}
.duoTone:after {
top: auto;
bottom: 0;
background-color: #888888;
}
Three: Sleek, but only for newer browsers (CSS3): Same span code as #1 (see fiddle).
.duoTone {
background-color: #888888 ;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .4)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
}