This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 12 months ago.
I am currently making a website and I want to make the border for a div a linear gradient. I tried to do it the way you put a gradient on a background but that doesn't work
.box {
width: 300px;
height: 300px;
border-radius: 20px;
border: solid linear-gradient(45deg, #2e01f8, #40c239) 5px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: grey;
}
<div class="box"></div>
Help would be appreciated.
You can use the border-image css property:
border-width: 4px;
border-style: solid;
border-image: linear-gradient(to bottom, cyan, blue) 1;
Tutorial on how it works: https://codyhouse.co/nuggets/css-gradient-borders#:~:text=How%20to%20create%20gradient%20borders%20in%20CSS.%20To,linear-gradient%20%28to%20right%2C%20darkblue%2C%20darkorchid%29%201%20%3B%20%7D
Related
This question already has answers here:
CSS 3 rotateY() and rotateX() not working as expected
(2 answers)
Closed 3 months ago.
I am trying achieve a movie-seat-booking project. a div box named screen that is as big movie screen in cinema.
How to achieve that my screen look same as the screen of example. thank you
/*this is my code*/
/*<div class="screen"></div>*/
.screen{
width: 180px;
height: 100px;
background-color: whitesmoke;
border-radius: .3125rem;
margin-left: 70px;
/* X-axis - counter-clockwise. */
transform: rotateX(-20deg);
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}
You can use perspective css property.Setting the property on a parent container gives its children a 3D space.
.wrapper {
display: flex;
justify-content: center;
perspective: 1000px;
}
.square {
width: 500px;
height: 200px;
transform: rotateX(320deg);
background: rebeccapurple;
}
<div class="wrapper">
<div class="square"></div>
</div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 1 year ago.
I wanna do a half (9 o'clock to 3 o'clock) circle. The color started from 9 to 3 o'clock and color of green slowly turn to red.
Is it this possible do it in css?
Below circle a bit off from what i want. The color fade in the start 9 and 3 o'clock and the green in the middle of the circle.
The green color should start from the 9 o'clock and slowly to red.
.rounded {
width: 300px;
height: 300px;
border: 10px solid transparent;
border-radius: 150px;
background-image: linear-gradient(white, white), linear-gradient(.50turn, green, red, white 50%);
background-origin: border-box;
background-clip: content-box, border-box;
}
#parent {
display: flex;
width: 100vw;
justify-content:center;
}
<div id="parent">
<div class="rounded"></div>
</div>
#cont {
background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box {
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 2 years ago.
I'd like to implement graphics with css of a photo-like image (not a button) but I'm not sure how to put the gradation of the border.
Can someone explain to me?
width: 50px;
height: 50px;
background: linear-gradient(-135deg, #27c4f3 0%,#9dd2ff 100%);
border-radius:42px;
border:4px solid;
display:inline-block;
cursor:pointer;
border-image:linear-gradient(#27c4f3 0%,#9dd2ff 100%);
I was able to achieve something similar by:
using an outer and inner circle
making the outer larger
positioning the inner in the center of the outer
making the background of the outer a gradient
.button {
background: linear-gradient(#0000ff 0%, #ff00ff 100%);
border-radius: 50%;
cursor: pointer;
display: grid;
height: 100px;
place-items: center;
width: 100px;
}
.button__body {
background: #fff;
border-radius: 50%;
display: grid;
place-items: center;
height: 80px;
width: 80px;
}
<div class="button">
<div class="button__body">Hey</div>
</div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
SVG with radialGradient not work in browsers
(1 answer)
Closed 2 years ago.
In following code I expect both divs to be round. But the first one with border-image applied is square. How can I fix that and make it round too?
div {
float: left;
width: 130px;
height: 130px;
margin: auto;
border: 30px solid transparent;
border-radius: 50%;
border-image: linear-gradient(45deg, red, blue) 30;
}
div + div {
margin-left: 1em;
border-image: none;
border-color: green;
}
<div></div>
<div></div>
It is not possible to combine them. The W3 Spec says:
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
However, you can achieve the same effect by using a multiple elements and a CSS gradient
#cont{
background: -webkit-linear-gradient(left top, crimson 0%, blue 100%);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: white;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
You can use radial-gradient background-image. And you can mask it with mask-image. border-image does not work with border-radius.
div {
float: left;
width: 190px;
height: 190px;
margin: auto;
/* border: 30px solid transparent;
border-radius: 50%;
border-image: linear-gradient(45deg, red, blue) 30;*/
border-radius: 50%;
background: linear-gradient(45deg, red, blue);
-webkit-mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
}
div+div {
margin-left: 1em;
border-image: none;
border-color: green;
}
<div></div>
<div></div>
I'm having an issue where when I use border radius in combination of rgba valued colors like let's say rgba(255,255,255,.8) and then use a box-shadow to somewhat make the box appear feathered I get the issue that the corners are not solid as can be seen in this image.
Detail of the top left corner:
As can be seen, the edges when using border radius in combination with the other CSS element it makes a weird transparent edge when border-radius is set in place.
I've tried quite a bit but without much success, here's a code attempt as I wanted to attempt this for another project but just simply replicated it here: https://jsfiddle.net/01u7gbxa/1/
The code itself can be applied on any object so it seems which resolves to the same results:
background:rgba(0,0,0,.8);
box-shadow:0 0 15px 30px rgba(0,0,0,.8);
border-radius:60px;
Does anyone know if this is possible to fix at all?
Thanks in advance for further information.
You can do the same using blur filter. Apply it to a pseudo element to not affect any potential content
body {
background: #f00;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border-radius: 60px;
position: relative;
}
.box:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: rgba(0, 0, 0, .8);
border-radius: inherit;
filter: blur(10px);
}
<div class="box"></div>
Change these :
background:rgba(0,0,0,.8);
box-shadow:0 0 15px 30px rgba(0,0,0,.8);
to these:
background-color: #000;
box-shadow:0 0 15px 30px #000;
opacity : 0.8;