Categories
CSS Web development

CSS Conic-Gradient

CSS Conic gradient

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:

CSS conic-gradient

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>
pie chart conic gradient

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:

CSS starburst

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:

CSS Conic gradient

Enjoy coding!

Categories
CSS Web development

CSS Gradient Border

CSS Gradient Border

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!

Read also:

How to create a gradient border using a CSS conic gradient?

CSS Conic-Gradient

Categories
Photoshop

How to create the Gradient Text Effect in Photoshop?

To create the Gradient Text Effect in Photoshop follow the steps below and/or watch the video tutorial.

gradient text effect photoshop

Step1.

Create a new document. Set the colour of your background layer and type your text.

gradient text effect photoshop

Step2.

Right-click on the text layer and select the Blending Options.

gradient text effect

Go to Gradient Overlay:

gradient text effect

You can see your text with the gradient effect now:

gradient effect

In Gradient Overlay panel you can choose the already existing gradient or create a new one in the Gradient Editor.

gradient text
gradient text effect

Step3.

Select or choose new colours and create a new gradient.

text effect photoshop

To create the gradient below I used three colours: #72a862, #2af598 and #05747b:

Watch also the video tutorial: