Creating a gradient torus in HTML / CSS
To put it simply, I need to place the gradient on a dynamically sized circle with a transparent background. Is there a way to recreate the following image in CSS/HTML
?
As far as I can tell, neither radial gradients nor border images can plot this shape. The key is that the center of the circle should be transparent, since I cannot "fake" the torus by filling the center with white.
Update: This effect is fairly easy to achieve in SVG
, but I would only like to know about HTML
/ CSS
only to achieve it. See this example: http://codepen.io/MaxXiong/pen/rOGzgR
source to share
By using only CSS, I find you are limited (unless you want to use SVG in CSS).
A possible solution that doesn't scale in terms of resolution is to create a simple mask using PNG like this.
The transparent part is the area that will be removed from the bounding box of the element.
The outer circle can be created trivially via border-radius: 50%
.
body {
background-color: #d5d5d5;
}
.torus {
width: 312px;
height: 312px;
/* creates outer circle */
border-radius: 50%;
/* masks the inner circle */
-webkit-mask: url(http://i.imgur.com/pFLUTns.png) no-repeat;
mask: url(http://i.imgur.com/pFLUTns.png) no-repeat;
/* gradient background */
background: #00601b;
background: -moz-linear-gradient(top, #00601b 0%, #e10019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00601b), color-stop(100%,#e10019));
background: -webkit-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -o-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -ms-linear-gradient(top, #00601b 0%,#e10019 100%);
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00601b', endColorstr='#e10019',GradientType=0 );
}
<div class="torus"></div>
Update
You can use radial-gradient( )
to dynamically create the clip path, which I originally did by hand using PNG. Currently only webkit is supported.
Apart from browser support, the only minor unsatisfactory result is no overlay on the inner circle. You can mess up the values to create a little + -1% interpolation at the end, but I personally find a hard cut looks better. But hey, it's super straight forward and respects the scale of the container!
body {
background-color: #d5d5d5;
}
.torus {
width: 312px;
height: 312px;
/* create the outer circle */
border-radius: 50%;
/* use a radial gradient to create the inner circle mask */
/* tweak 60% for the desired radius of the gradient */
-webkit-mask: radial-gradient(ellipse at center,
rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%
);
mask: radial-gradient(ellipse at center,
rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%
)
/* gradient background */
background: #00601b;
background: -moz-linear-gradient(top, #00601b 0%, #e10019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00601b), color-stop(100%,#e10019));
background: -webkit-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -o-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -ms-linear-gradient(top, #00601b 0%,#e10019 100%);
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00601b', endColorstr='#e10019',GradientType=0 );
}
<div class="torus"></div>
source to share
Not a perfect solution for the updated question (CSS embeds the forbidden SVG), and currently only works in Firefox based browsers (afaik), but wants to bring CSS clip-path
into discussion:
div {
height:100px;
width:100px;
background-image: linear-gradient(to bottom, #393, #933 );
clip-path: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="M 50 10 A 25 25 0 0 0 50 90 A 25 25 0 0 0 50 10 M 50 0 A 50 50 0 0 1 50 100 A 50 50 0 0 1 50 0" /></clipPath></defs></svg>#a');
}
body {
background-image: linear-gradient(to right, #333, #666, #333);
background-size: 33px 10px;
}
<div>
source to share
Use a unicode circle and set the font color of the gradient.
http://jsfiddle.net/agvbqvmn/1/
.bg {
width: 200px;
height: 200px;
background-color: #eee;
}
.torus:after {
content: '\020dd';
display: block;
font-size: 72px;
line-height: 102px;
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="bg">
<div class="torus"></div>
</div>
source to share