#CSS Gradient

CSS gradients use functions to create smooth transitions between colors, which can be applied to backgrounds, borders, and more.

#Linear Gradient

Linear gradients are created using linear-gradient, transitioning colors along an axis. For example:

<!-- Along 90 degrees -->
<p style="background: linear-gradient(90deg, #39c5bb, #66CCFF, #39c5bb)">Primers — Your Programming Learning Partner</p>

<!-- Along 90 degrees with specified color stops, areas outside are not transitioned -->
<p style="background: linear-gradient(90deg, #39c5bb 30%, #66CCFF 50%, #39c5bb 70%)">Primers — Your Programming Learning Partner</p>

HTML

#Radial Gradient

Radial gradients are created using radial-gradient, transitioning outward from a central point. For example:

<!-- Circle centered -->
<div style="background: radial-gradient(circle, #66CCFF, #212121); height:320px;"></div>

HTML

<!-- Circle at top left -->
<div style="background: radial-gradient(circle at top left, #66CCFF, #212121); height:320px;"></div>

HTML

<!-- Ellipse centered -->
<div style="background: radial-gradient(ellipse, #66CCFF, #212121); height:320px;"></div>

HTML

<!-- Ellipse at bottom right -->
<div style="background: radial-gradient(ellipse at right bottom, #66CCFF, #212121); height:320px;"></div>

HTML

#Text Gradients

Gradients cannot be applied directly to text, but you can achieve this effect by making the text transparent, clipping the background to the text area, and applying a background gradient:

<span style="background: linear-gradient(90deg, #ff1493, #66CCFF); background-clip: text; color: transparent;">
    Primers — Your Programming Learning Partner
</span>

Text Gradient