Tag: gradient

CSS Conic-Gradient

Post author By Lena Stanley
Post date May 15, 2021

A conic (conical) gradient is similar to a radial-gradient. The difference between them is that in the case of radial gradient the color stops
are defined by a length, and in the case of a conic gradient, the color stops are defined with an angle.

Example:

<!doctype html>
<html>
<head>
<style>
.radial-gradient {
  position: relative;
  background-image: radial-gradient(red, green, blue);
  width:200px;
  height: 200px;
  border-radius:50%;
  margin-right:30px;
}

.conic-gradient {
  position: relative;
  background-image: conic-gradient(red, green, blue);
  width:200px;
  height: 200px;
  border-radius:50%;  
}

</style>
</head>
<body>
    <div class="radial-gradient"></div>
    <div class="conic-gradient"></div>
</body>
</html>

Output:

More examples:

Pie Chart:

<!doctype html>
<html>
<head>
<style>
.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient(
     #1a535c 40deg, #ff6b6b 40deg 160deg, #4ecdc4 160deg);
  margin-right: 20px;
}

.pie-chart-border {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient( 
     #1a535c 1deg 60deg, #ff6b6b 60deg 120deg, #4ecdc4 120deg 220deg, #ffe66d 220deg);
  margin-right: 20px;
}

.pie-chart-border:before {
  content:"";
  position: absolute;
  background-color: #fff;
  width:150px;
  height:150px;
  border-radius:50%;
  top:25px;
  left:25px;
}

.pie-chart-four-colors {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient(#4ecdc4 25%, #1a535c 0 50%, #ffe66d 0 75%, #ff6b6b 0);
}

</style>
</head>
<body>
  <div class="pie-chart"></div>
  <div class="pie-chart-border"></div>
  <div class="pie-chart-four-colors"></div>
</body>
</html>

Checkerboard:

<!doctype html>
<html>
<head>
<style>
.checkerboard {
  position: relative;
  border:7px solid #000;
  width:200px;
  height:200px;
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 43%/45px 50px;
}
</style>
</head>
<body>
  <div class="checkerboard"></div>
</body>
</html>

Output:

Starburst:

<!doctype html>
<html>
<head>
<style>
.starburst {
  position: absolute;
  width:200px;
  height: 200px;
  background: repeating-conic-gradient(#ffdd00 0 18deg, #ffc300 0 36deg);
}
</style>
</head>
<body>
  <div class="starburst"></div>
</body>
</html>

Output:

Umbrella:

<!doctype html>
<html>
<head>
<style>
.umbrella {
  position: relative;
  width:200px;
  height:200px;
  border-radius:50%;
  background-image:
 conic-gradient(
      #ffe0e9 0deg 20deg, #ffc2d4 20deg 40deg, #ff9ebb 40deg 60deg, #ff7aa2 60deg 80deg, #e05780 80deg 100deg, #b9375e 100deg 120deg, #8a2846 120deg 140deg, #602437 140deg 160deg, #522e38 160deg 180deg, #ffe0e9 180deg 200deg, #ffc2d4 200deg 220deg, #ff9ebb 220deg 240deg, #ff7aa2 240deg 260deg, #e05780 260deg 280deg, #b9375e 280deg 300deg, #8a2846 300deg 320deg, #602437 320deg 340deg, #522e38 340deg 360deg);    
    }     
}
</style>
</head>
<body>
  <div class="umbrella"></div>
</body>
</html>

Output:

Enjoy coding!

CSS radial-gradient() Function

HTML Canvas Gradients

Tags #CSSgradients, conic-gradient, CSS, gradient

Web development

CSS Gradient Border

Post author By Lena Stanley
Post date March 5, 2021

Demo:

*to see the live output of the code on the website click here.

To create the CSS Gradient border follow the steps below and watch the video tutorial:

Step1.

Add HTML

If you want to create square/ rectangle border:

<div class="container">
  <div class="gradient">
Type your text here...
  </div>  
</div>

If you want to create rounded border:

<div class="container-radius">
  <div class="gradient-border-radius">
Type your text here...
  </div>  
</div>

Step2.

Add CSS

Set the colour of the background and the position of the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;  
}

To read more how to create the gradient in CSS click here.

CSS for Square/ Rectangle border:

.container {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;   
  margin-right:25px;
}

.gradient {
  background-color: #fff;
  padding: 2rem;
  color: black;  
}

CSS for Rounded border:

.container-radius {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;
  border-radius: 7%;  
}

.gradient-border-radius {
  background-color: #fff;
  padding: 2rem;
  color: black;
  border-radius: 5%;  
}

CSS gradient borders — *to see the live output on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

CSS Conic-Gradient

Tags #CSSgradients, border, CSS, gradient

Web development

CSS Gradient Text Effect

Post author By Lena Stanley
Post date February 2, 2021

To create the CSS Gradient Text Effect follow the steps below and watch the video tutorial.

Step1.

Add HTML

<div class="text">Type your text here</div>

Step2.

Add CSS

Set the colour and the position of the background and the text:

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style your text:

.text {
  position: relative;
  text-align: center;
  font-size:100px;
  font-family: arial;
  font-weight: 900;
  background-image: linear-gradient( 109.6deg,  rgba(48,207,208,1) 11.2%, rgba(51,8,103,1) 92.5% );
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.85);  
}

To see the live output of the code go to lenastanley.com.

Watch also the video tutorial: