When working with CSS, it's possible to set various properties of a linear gradient such as color, position, orientation, and width. However, is it feasible to define its length? I prefer not to use SVG and am specifically looking for a CSS-based solution.
My goal is to create something akin to an eye iris using a linear gradient: https://i.sstatic.net/g5RyK.jpg
The issue with linear gradients is that they tend to create an infinite stripe. Is there a way to restrict this stripe within a certain range?
So far, I've managed to adjust the color, width, position, and orientation of the gradient, but I haven't been successful in controlling its length:
div {
height: 100px;
width: 100px;
background: white;
background-image:
linear-gradient(45deg, transparent 70px, red 70px, black 72px, transparent 72px),
linear-gradient(-45deg, transparent 70px, red 70px, blue 72px, transparent 72px),
radial-gradient(circle at 50px 50px, green 5px, transparent 40px);
}