I'm attempting to create a background of 3 different color shades of blue. 2 of the 3 shades of blue will be curved and angled slightly.
Main background blue: #005A83
First lighter shade blue: #036595
Second lighter shade blue: #0571A4
I've done some research and I believe I can achieve this by using linear-gradient but I'm still having some issues getting the look I am expecting.
I attempt to re-create something like this image here:
Here is my code sample:
html, body {
height: 100%;
}
body {
background: linear-gradient(65deg, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%);
}
I am having issues with 2 main parts of this.
I am having issues showing the 2 lighter shades of blue. Currently only showing 1 color. I've attempted to fix this by moving around some of the percentages used for linear-gradient but it blends in the colors together which is more difficult to see.
How can I curve the lighter shades to match the image above showing different shades of blue.
You can do a radial gradient and then shift its center off the page. You'll need quite a larger radius based on your sample.
I had a rough go at it below. You will need to adjust the circle size (first value), offsets (second and third value), and the individual stop percentages to get what you deem is perfect.
html, body {
height: 100%;
}
body {
background: rgb(0,90,131) radial-gradient(circle 5000px at -200px 200%, rgba(0,90,131,1) 0%, rgba(0,90,131,1) 10%, rgba(3,101,149,1) 10%, rgba(3,101,149,1) 12%, rgba(5,113,164,1) 12%, rgba(5,113,164,1) 13%, rgba(0,90,131,1) 13%, rgba(0,90,131,1) 100%);
}
You can use multiple HTML elements to achieve the desired result.
<body>
<div class="container">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
height: 500px;
width: 100%;
background-color: rgb(10, 5, 87);
overflow: hidden;
}
.circle1 {
border-radius: 100%;
position: absolute;
background-color: rgb(0, 0, 105);
left: 0;
bottom: 0;
height: 600px;
width: 600px;
transform: translate(-50%, 50%);
z-index: 4;
}
.circle2 {
border-radius: 100%;
position: absolute;
background-color: rgb(22, 22, 148);
left: 0;
bottom: 0;
height: 1200px;
width: 1200px;
transform: translate(-50%, 50%);
z-index: 3;
}
.circle3 {
border-radius: 100%;
position: absolute;
background-color: rgb(6, 6, 180);
left: 0;
bottom: 0;
height: 1800px;
width: 1800px;
transform: translate(-50%, 50%);
z-index: 2;
}
Related
body {
background-image: linear-gradient(
0deg,
var(blue) 70%,
var(red) 30%
)
no-repeat;
height: 100vh;
}
1) How to add a border-radius at the exact bottom left and right corners of the red background-color?
As i require the border-radius in the red color which is part of the
linear-gradient, i don't know how.
Its just on the body element.
This snippet puts the red background onto the after pseudo element which is given 30% of the overall height of the body and has the two bottom corners rounded.
The before pseudo element is given the blue background.
body {
--blue: blue;
--red: red;
height: 100vh;
width: 100vw;
}
body::before,
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
body::before {
background-color: blue;
height: 100%;
}
body::after {
height: 30%;
background-color: var(--red);
border-radius: 0 0 20px 20px;
}
<body></body>
It is possible to combine linear and radial gradients to get a rounded effect, but I find the result isn't always as crisp as using border rounding.
How can I create a CSS gradient like the one found in the speaker hompod?
Can you give me some advice?
.div {
background: linear-gradient(217deg, #16446c, rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, #006867, rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, #62265d, rgba(0, 0, 255, 0) 70.71%);
border-radius: 50%;
font-size: 250px;
height: 1em;
width: 1em;
filter: blur(2px);
}
<div class='div'></div>
Edit:
.div {
background: conic-gradient(from 180deg at 50% 50%, #00FFC2 0deg, #00F0FF 120.07deg, #0077FF 179.52deg, #FF0099 241.65deg, #0470E5 299.6deg, #00FFC2 360deg);
border-radius: 50%;
font-size: 250px;
height: 1em;
width: 1em;
filter: blur(32px);
}
<div class='div'></div>
I think your work is pretty close visually compare to the original image. Since you did not mention what is missing from your homepod recreation, I just try my best to mimic the image. You may change the color choice and the arc angle for better result.
My approach is to divide the orb into pies. Each pie has a distinct color. Since the image is blurry and my naked eye just cannot tell how many solid color are there. I roughly pick 4 from it.
The center of the orb seems brighter so I apply radial-gradient to the pie. I set the center to be white and at the 50% of the gradient its distinct color begin. This is the image before the blur applied.
This is the final result
.background {
width: 400px;
height: 400px;
background-color: black;
padding: 80px;
position: relative;
}
.background .pie {
width: 30%;
height: 30%;
background: white;
border-top-left-radius: 100%;
position: absolute;
transform-origin: bottom right;
filter: blur(40px);
}
.background .pie.wineberry {
transform: rotate(81deg);
background: radial-gradient(circle at bottom right, white, #663a6d 40%);
}
.background .pie.cello {
transform: rotate(116deg);
background: radial-gradient(circle at bottom right, white, #24425e 40%);
}
.background .pie.greenpea {
transform: rotate(202deg);
background: radial-gradient(circle at bottom right, white, #18665c 40%);
}
.background .pie.greenpea2 {
transform: rotate(287deg);
}
.background .pie.astronaut {
transform: rotate(13deg);
background: radial-gradient(circle at bottom right, white, #345a7f 40%);
}
<div class="background">
<div class="pie astronaut"> </div>
<div class="pie greenpea"> </div>
<div class="pie greenpea greenpea2"> </div>
<div class="pie cello"> </div>
<div class="pie wineberry"> </div>
</div>
Edit on 8-Apr-2022
Since #Paul prefer a single element solution. I update the answer. Thanks #cloned for his conic gradients idea.
The final result achieve by 2 gradient background. First the radial-gradient mimic the center brighter area. Second the conic-gradient represent the purple-blue color wheel. Color choice remains the same.
.background {
width: 400px;
height: 400px;
background-color: black;
padding: 80px;
position: relative;
}
.orb {
width: 50%;
height: 50%;
border-radius: 50%;
filter: blur(25px);
background: radial-gradient(circle at center, white, transparent 40%), conic-gradient(from 45deg, #663a6d 52deg, #24425e 65deg, #18665c 120deg 307deg, #345a7f 353deg);
}
<div class="background">
<div class="orb"> </div>
</div>
I have a design in that there is two color as background centered side by side. I have tried to achieve the result using radial-gradient. But I didn't find any solution to add two colors. Please check the below image for the design.
How to achieve the above background design. The 2 colors used is #D0F9F3 and #E3E5FD. I have tried using the below code.
display: flex;
justify-content: center;
align-items: center;
padding: 100px 0;
background: radial-gradient(circle, #D0F9F3, #F3F8FF 250px);
background-repeat: no-repeat;
But the above code only produce 1 color. How to add two colors side by side? Is it possible?
Solution with linear-gradient and filter.
Position element to the center with position: absolute and z-index: -1; so as not to interfere with the main content.
Use breakpoints in the linear-gradient to get desired result.
Apply the filter: blur() method to smooth out the edges.
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
height: 100vh;
display: grid;
place-items: center;
background-color: hsl(215, 100%, 98%);
position: relative;
overflow-x: hidden;
}
.main {
display: flex;
flex-direction: column;
gap: 2em;
padding: 1em;
}
.main h1 {
font-size: 1.6em;
text-align: center;
color: #8aa1e0;
}
.main input {
min-width: 500px;
max-width: 800px;
padding: 0.5em;
background-color: black;
color: white;
border: none;
}
.circle {
width: 500px;
height: 400px;
border-radius: 50%;
position: absolute;
top: 55%;
left: 50%;
background: linear-gradient( 90deg, hsl(235, 90%, 90%) 40%, hsl(171, 80%, 80%) 30%, hsl(171, 80%, 80%) 70%, hsl(235, 90%, 90%) 70%);
background-repeat: no-repeat;
transform: translate(-50%, -50%);
filter: blur(100px);
z-index: -1;
}
<div class="main">
<h1>I'm looking for a</h1>
<input type="text" />
</div>
<div class="circle"></div>
The problem is both color are white-blue shades hence you can see only one color but if you see the color in a hex color code generator website it is seen that both color are way similar to each other.
https://htmlcolorcodes.com/color-picker/
Type the above color hex codes and see the colors both are same, I recommend using different colors as it would be visible to eyes and hence also increasing the SEO.
#grad-div{
height:100vh;
width:100vh;
outline: 1px solid red; /* for visualising */
background: radial-gradient(#D0F9F3, #F3F8FF,#FFFFFF); /* use background color for the third color */
}
<div id="grad-div"></div>
You can use two radial-gradients, and then make them look side by side by changing their positions.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: relative;
height: 100vh;
width: 100vw;
}
.gradient {
position: absolute;
width: 80%;
height: 100%;
}
.gradient-1 {
left: 0;
background: radial-gradient(circle, purple, transparent 250px);
}
.gradient-2 {
right: 0;
background: radial-gradient(circle, green, transparent 250px);
}
<div class="box">
<div class="gradient gradient-1"></div>
<div class="gradient gradient-2"></div>
</div>
More Explanation
Make gradients absoulte, so they can be positioned on top of each other easily.
use transparent for the background's third parameter so you only get a gradient and nothing more.
Make each gradient box width less than 100% (like width: 80%) so one of the is aligned to right (with right: 0) and the other one is aligned to left (left: 0)
I tried to make a hole area in the bottom corner of the overlay like in the image below, but still having trouble.
here is an example of the code
<div className="container h-screen bg-overlay fixed z-50 opacity-90 holes">
</div>
.holes::before {
content: "";
display: block;
/* Scale */
width: 50px;
padding: 10px 0px;
/* Position */
position: absolute;
top: 90%;
right: 60%;
z-index: 2;
/* Border */
border: solid 80px rgb(255,255,255);
border-radius: 50%;
opacity: 0.7;
}
but the code above still doesn't fit because it doesn't make a hole in the lower left corner but makes a new hole with a pseudo class
It can be achieved using pseudo classes. Just an after or before can be used if you are not expecting it to emit any events.
Do you require a complete circle or a half one?
.container {
width: 100%;
height: 300px;
position: relative;
background-color: blue;
}
.round {
position: absolute;
display: inline-flex;
justify-content: center;
align-items: center;
content: '';
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid yellow;
background-color: #fff;
bottom: -50px;
left: 50px;
color: #777;
font-size: 16px;
}
<div class='container'>
<span class='round'>UPLOAD</span>
</div>
EDIT
Added text inside the round
You can use CSS mask to cut a hole in an element with a radial-gradient as the mask image. You can put the yellow border around the hole with a background radial gradient at the same place.
This snippet has a container background of magenta so you can see that a genuine 'hole' is cut with whatever is below being shown (though the background radial gradient will cover it with a transparent layer).
Note: view the snippet in Full page
.container {
background-color: magenta;
display: inline-block;
width: 100vw;
height: 100vh;
}
.div {
-webkit-mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
background-color: skyblue;
background-image: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, yellow 50px, yellow 53px, transparent 53px, transparent 100%);
width: 100%;
height: 300px;
margin: 0;
padding: 0;
}
<div class="container">
<div class="div"></div>
</div>
Imagine that we have two layers of background.
The bottom layer is green <div class="green"></div>. For simplicity, let's assume it's just a color. But in my project, this layer contains a css animation.
And another layer of blue goes on top of it <div class="blue"></div>.
Now, I want to have another div that goes on top of both, and it reveals the green background (animation layer in my project).
The closest example I can think of is if you imagine a spotlight. Everything seems black, and the spotlight moves around and reveals the background.
Essentially, that's what I have:
<div class="green">
<div class="blue">
<div class="reveal"></div>
</div>
</div>
It will look something like this. Just remember, the green layer is an animation in my project.
QUESTION: how can I complete the .reveal styles to achieve the above behavior.
First div - draws .green background (animation)
Second dv - draws .blue background goes on top of it
Third/Fourth/... divs - Goes on top of both, but it reveals whatever the background First div draws
Note: First and Second div covers 100% of the available width and height.
.green {
background-color: #159c82;
width: 100vw;
height: 100vh;
}
.blue {
background-color: #1b4287;
// I could change this to a sibling div and use,
// position: absolute; but that seems unnecessary
width: 100%;
height: 100%;
}
.reveal {
margin-top: 10px;
margin-left: 10px;
width: 200px;
height: 50px;
// not sure what else to put here to make it work
}
<div class="green">
<div class="blue">
<div class="reveal"></div>
</div>
</div>
P.S. There is one approach I found that I did not like at all.
Use mask to create a hole and no need for the reveal div. You can later change the size and position to have the animation you want:
.green {
background: linear-gradient(45deg,#159c82,red);
height: 100vh;
}
.blue {
background:#1b4287;
height: 100%;
-webkit-mask:
/* you adjust this */
linear-gradient(#fff,#fff)
50px 50px/ /*left top*/
200px 20px, /*width height*/
/**/
linear-gradient(#fff,#fff);
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite: destination-out;
mask:
/* you adjust this */
linear-gradient(#fff,#fff)
50px 50px/ /*left top*/
200px 20px, /*width height*/
/**/
linear-gradient(#fff,#fff);
mask-repeat:no-repeat;
mask-composite:exclude;
transition:.5s;
}
.blue:hover {
-webkit-mask-position:100px 100px,0 0;
mask-position:100px 150px,0 0;
-webkit-mask-size:300px 50px,auto;
mask-size:300px 50px,auto;
}
body {
margin: 0;
}
<div class="green">
<div class="blue">
</div>
</div>
You can also add as many mask as you want:
.green {
background: url(https://picsum.photos/id/1018/800/800) center/cover;
height: 100vh;
}
.blue {
background:#1b4287;
height: 100%;
-webkit-mask:
/* 3rd mask */
radial-gradient(farthest-side,#fff 99%,transparent)
top 50px right 50px/
100px 100px,
/**/
/* 2nd mask */
linear-gradient(#fff,#fff)
bottom 50px right 50px/
300px 20px,
/**/
/* 1st mask */
linear-gradient(#fff,#fff)
50px 50px/
200px 20px,
/**/
linear-gradient(#fff,#fff);
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite: destination-out;
mask:
/* 3rd mask */
radial-gradient(farthest-side,#fff 99%,transparent)
top 50px right 50px/
100px 100px,
/**/
/* 2nd mask */
linear-gradient(#fff,#fff)
bottom 50px right 50px/
300px 20px,
/**/
/* 1st mask */
linear-gradient(#fff,#fff)
50px 50px/
200px 20px,
/**/
linear-gradient(#fff,#fff);
mask-repeat:no-repeat;
mask-composite:exclude;
transition:.5s;
}
.blue:hover {
-webkit-mask-position:
100px 100px,
bottom 100px left 50px,
top 50px right 50px,
0 0;
mask-position:
100px 100px,
bottom 100px left 50px,
top 50px right 50px,
0 0;
-webkit-mask-size:
150px 150px,
50px 50px,
300px 50px,
auto;
mask-size:
150px 150px,
50px 50px,
300px 50px,
auto;
}
body {
margin: 0;
}
<div class="green">
<div class="blue">
</div>
</div>
A techhnique that will work, with an even simpler layout, is box-shadow
.layer1 {
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(yellow, blue);
background-size: 200% 200%;
animation: bkg 2s infinite alternate;
background-origin: padding-box;
}
.layer2 {
width: 200px;
height: 200px;
position: absolute;
background: transparent;
border-radius: 30px;
left: 20px;
top: 40px;
box-shadow: 0px 0px 0px 10000px blue;
}
#keyframes bkg {
from {
background-position: 0 0;
}
to {
background-position: 100% 100%
}
}
<div class="layer1"></div>
<div class="layer2">
</div>
Also, you have a posibility to achieve this using blending.
The main disadvantage is that this uses hard-light , son the colors used in layer2 are limited to having 0 or 255 for the primary colors (red blue and green).
It will work for pure red (255, 0,0), green (0, 255, 0), blue (0, 0, 255), and also (255, 255, 0), (255, 0, 255), (0, 255, 255)
But it has the advantage that you can set severial divs to act as windows
.layer1 {
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(yellow, blue);
background-size: 200% 200%;
animation: bkg 2s infinite alternate;
background-origin: padding-box;
}
.layer2 {
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 255, 0);
mix-blend-mode: hard-light;
}
.layer3 {
width: 200px;
height: 200px;
position: absolute;
background: grey;
border-radius: 30px;
left: 20px;
top: 40px;
}
#keyframes bkg {
from {
background-position: 0 0;
}
to {
background-position: 100% 100%
}
}
<div class="layer1"></div>
<div class="layer2">
<div class="layer3"></div>
</div>
This will work also for multiple divs:
.layer1 {
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(yellow, blue);
background-size: 200% 200%;
animation: bkg 2s infinite alternate;
background-origin: padding-box;
}
.layer2 {
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 255, 0);
mix-blend-mode: hard-light;
}
.layer3 {
width: 200px;
height: 200px;
position: absolute;
background: grey;
border-radius: 30px;
left: 20px;
top: 40px;
}
.layer3:nth-child(2) {
left: 120px;
top: 80px;
}
#keyframes bkg {
from {
background-position: 0 0;
}
to {
background-position: 100% 100%
}
}
<div class="layer1"></div>
<div class="layer2">
<div class="layer3"></div>
<div class="layer3"></div>
</div>
Do you want to put the reveal div in this postion only, or show the green color from the bottom layer?
for only the positon you can add realtive position in your blue div and absolute position in your reveal div with top and left values.
.green {
background-color: #159c82;
width: 100vw;
height: 100vh;
}
.blue {
background-color: #1b4287;
width: 100%;
height: 100%;
position: relative;
}
.reveal {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 50px;
}
If I understand you correctly you probably should use a css variable.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Editing your example we get the following.
:root {
--bottom-layer-color: #159c82
}
.green {
background-color: var(--bottom-layer-color);
width: 100vw;
height: 100vh;
}
.blue {
background-color: #1b4287;
width: 100%;
height: 100%;
}
.reveal {
margin-top: 10px;
margin-left: 10px;
width: 200px;
height: 50px;
background-color: var(--bottom-layer-color)
}
<div class="green">
<div class="blue">
<div class="reveal"></div>
</div>
</div>
cheers,
to change the color with css:
/* Use a later css file to redeclare the root variable, */
/* this will override previously declared css. */
/* https://css-tricks.com/precedence-css-order-css-matters/ */
:root {
--bottom-layer-color: powderblue
}
to change the color with javascript:
const eStyle = document.documentElement.style
eStyle.setProperty('--top-bar-height', '263px');
You can change a lot of things with css variables. Not just background-colors.
For instance
root: {
--bottom-layer-color: #159c82
--bottom-layer-radius: 50%;
/* this would make the bottom layer a circle. And reaveal a circle. */
}
.green {
background-color: var(--bottom-layer-color)
border-radius: var(--bottom-layer-color)
width: 100vw;
height: 100vh;
}
.reveal {
background-color: var(--bottom-layer-color)
border-radius: var(--bottom-layer-color)
}
/* Set --bottom-layer-radius back to 0 to make both items square again. */
This is one of the easiest things to do in CSS
<Style>
.blue {
width: 100%;
height: 300px;
background-color: lightblue;
}
</style>
<div class="blue">
</div>