CODEWITHSUNDEEP
gradientcss
Maurice
Maurice

Reputation: 1157

CSS3 circle with gradient border?

I am trying to replicate a green square image in pure css3. You can see the image here:enter image description here

So far I have managed to generate the square, looking just like the one in the image. The problem is the border of the circle in the square. As you can see, the border of that circle in the image is gradient and mine is not (see fiddle) and I have no idea how to replicate this in CSS...

Here is my fiddle of the square

The CSS code I am currently using:

.greenBlock, .greenCore {
    background-color: #00c200;
    border: 3px solid;
    border-top-color: #00de00;
    border-right-color: #006900;
    border-bottom-color: #006900;
    border-left-color: #00de00;
    z-index: 10;
    width: 42px;
    height: 42px;
}

.greenCore {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    -webkit-transform: translate(25%, 25%);
    transform: translate(25%, 25%); 
}

How can I do this gradient circle border in CSS3?

Thanks a lot

Upvotes: 4

Views: 4415

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

I would use a pseudo-element (:before) and style it with a gradient background.
(that is because border-image cannot be combined with border-radius)

.greenBlock {
	background-color: #00c200;
	border: 3px solid;
	border-top-color: #00de00;
	border-right-color: #006900;
	border-bottom-color: #006900;
	border-left-color: #00de00;
	width: 42px;
	height: 42px;
	position:relative;
	z-index:10;
}

.greenCore {
	background-color: #00c200;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	top:50%;
	left:50%;
	margin-left:-11px; /*half width*/
	margin-top:-11px;
	position:relative;
}
.greenCore:before{
	content:'';
	position:absolute;
	z-index:-1;
	border-radius:50%;
	width:28px; /*22 of greenCore + 3 + 3 for the borders*/
	height:28px;
	left:-3px;
	top:-3px;
    
	background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900));
	background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
	background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
	background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
	background: linear-gradient(135deg, #00ff00 0%,#004900 100%);
}
<div class="palette greenBlock" data-code="2">
   <div class="greenCore"></div>
</div>

Upvotes: 6

Teodor
Teodor

Reputation: 3454

One possibility is to make a slightly larger circle with a diagonal gradient background, and place it behind the "core"-circle. This way the larger circle will appear to be a border to the second circle. By modifying your fiddle, I got something like this.

In order to make the gradient I used the linear-gradient function, and assigned it as the background:

background: linear-gradient(135deg, #00de00, #006900);

The first value is the direction of the gradient in degrees. The second two values is the start and end color of the gradient.

Upvotes: 1

matt6frey
matt6frey

Reputation: 133

Perhaps you can try adding this:

box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff; -moz-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff; -webkit-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;

To your .greenCore class. This may be close. You may want to play with the values to get it closer to your liking.

Upvotes: 0

Related Questions