ForgeLearn
|$ curl https://forge-ai.dev/api/markdown?path=docs/css/gradients
$cat docs/css-gradients.md
updated Recently·10 min read·published

CSS Gradients

◆CSS◆Gradients◆Styling◆Intermediate
Introduction

CSS gradients are images generated by the browser from smooth color transitions. They are first-class CSS images — usable anywhere an image is accepted: backgrounds, borders, masks, and even as content values. No external assets, no HTTP requests, infinitely scalable.

CSS offers four gradient types: linear, radial, conic, and repeating variants of each. Modern CSS also supports color interpolation in perceptually uniform spaces like OKLCH for smoother, more natural-looking gradients.

gradient-basics.css
CSS
1.gradient {
2 /* basic linear gradient */
3 background: linear-gradient(135deg, #0D0D0D, #00FF41);
4
5 /* with multiple color stops */
6 background: linear-gradient(90deg, #0D0D0D, #00FF41 50%, #0D0D0D);
7}
Linear Gradients

Linear gradients transition colors along a straight line. The direction can be specified as an angle (deg) or with keywords (to top, to right, to bottom, to left, and diagonal combinations). The gradient line extends infinitely in both directions.

linear-gradients.css
CSS
1/* Direction keywords */
2.to-bottom { background: linear-gradient(to bottom, #0D0D0D, #00FF41); }
3.to-top { background: linear-gradient(to top, #0D0D0D, #00FF41); }
4.to-right { background: linear-gradient(to right, #0D0D0D, #00FF41); }
5.to-left { background: linear-gradient(to left, #0D0D0D, #00FF41); }
6.to-br { background: linear-gradient(to bottom right, #0D0D0D, #00FF41); }
7
8/* Angle values — more precise */
9.deg-0 { background: linear-gradient(0deg, #0D0D0D, #00FF41); }
10.deg-45 { background: linear-gradient(45deg, #0D0D0D, #00FF41); }
11.deg-90 { background: linear-gradient(90deg, #0D0D0D, #00FF41); }
12.deg-135 { background: linear-gradient(135deg, #0D0D0D, #00FF41); }
13.deg-180 { background: linear-gradient(180deg, #0D0D0D, #00FF41); }
14.deg-270 { background: linear-gradient(270deg, #0D0D0D, #00FF41); }
15.deg-360 { background: linear-gradient(360deg, #0D0D0D, #00FF41); }
16
17/* Multiple color stops */
18.stripes { background: linear-gradient(90deg, #00FF41, #FFB000, #3B82F6); }
19
20/* Hard stops (0-width bands) */
21.hard-stripe { background: linear-gradient(90deg, #00FF41 50%, #0D0D0D 50%); }
22
23/* Terminal accent bar */
24.accent-bar {
25 background: linear-gradient(90deg, #00FF41, transparent);
26 height: 2px;
27}
preview
Radial Gradients

Radial gradients transition colors outward from a central point (or offset point) in a circular or elliptical shape. They are ideal for spotlights, glows, lens flares, and organic-looking backgrounds.

radial-gradients.css
CSS
1/* Basic radial — circle at center */
2.circle-center {
3 background: radial-gradient(circle, #00FF41, #0D0D0D);
4}
5
6/* Ellipse (default shape) */
7.ellipse {
8 background: radial-gradient(ellipse, #00FF41, #0D0D0D);
9}
10
11/* Positioned at corner */
12.corner-glow {
13 background: radial-gradient(circle at top right, #00FF41, transparent 60%);
14}
15
16/* Size keywords */
17.closest-side {
18 background: radial-gradient(circle closest-side, #00FF41, #0D0D0D);
19}
20
21.farthest-corner {
22 background: radial-gradient(circle farthest-corner, #00FF41, #0D0D0D);
23}
24
25/* Explicit size */
26.custom-size {
27 background: radial-gradient(50px 30px at center, #00FF41, #0D0D0D);
28}
29
30/* Terminal glow effect */
31.terminal-glow {
32 background:
33 radial-gradient(ellipse at bottom, rgba(0,255,65,0.15), transparent 60%),
34 #0D0D0D;
35}
36
37/* Multiple radials */
38.layered-glow {
39 background:
40 radial-gradient(circle at 20% 50%, rgba(0,255,65,0.2), transparent 40%),
41 radial-gradient(circle at 80% 50%, rgba(59,130,246,0.2), transparent 40%),
42 #0D0D0D;
43}
preview
Conic Gradients

Conic gradients transition colors around a center point (like a color wheel). Unlike linear and radial gradients which transition along a line or radius, conic gradients sweep through angles. They are perfect for pie charts, color pickers, and decorative rings.

conic-gradients.css
CSS
1/* Basic conic — 4-quadrant color wheel */
2.color-wheel {
3 background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
4}
5
6/* Conic from specific angle */
7.offset-start {
8 background: conic-gradient(from 90deg, #00FF41, #0D0D0D, #00FF41);
9}
10
11/* Positioned conic */
12.positioned {
13 background: conic-gradient(at 30% 50%, #00FF41, #FFB000, #3B82F6, #00FF41);
14}
15
16/* Pie chart style — hard stops */
17.pie-chart {
18 background: conic-gradient(
19 #00FF41 0% 25%,
20 #FFB000 25% 50%,
21 #3B82F6 50% 75%,
22 #EF4444 75% 100%
23 );
24 border-radius: 50%;
25}
26
27/* Terminal radar effect */
28.radar {
29 background: conic-gradient(
30 from 0deg,
31 rgba(0,255,65,0.3),
32 rgba(0,255,65,0) 30deg,
33 rgba(0,255,65,0) 360deg
34 );
35}
36
37/* Sweep gradient for loading indicators */
38.sweep {
39 background: conic-gradient(
40 from 0deg,
41 #00FF41,
42 rgba(0,255,65,0.3),
43 rgba(0,255,65,0.1),
44 rgba(0,255,65,0.3),
45 #00FF41
46 );
47}
preview
🔥

pro tip

Conic gradients are extremely useful for creating radar charts, loading spinners, and donut charts without SVG. Combine with mask-image or clip-path to create donut shapes.
Repeating Gradients

Repeating gradients (linear, radial, and conic) tile the gradient pattern indefinitely. They are perfect for stripes, checkerboard patterns, scanlines, and geometric backgrounds without external images.

repeating-gradients.css
CSS
1/* Repeating linear — stripes */
2.stripes {
3 background: repeating-linear-gradient(
4 45deg,
5 #00FF41,
6 #00FF41 10px,
7 #0D0D0D 10px,
8 #0D0D0D 20px
9 );
10}
11
12/* Vertical scanlines (CRT effect) */
13.scanlines {
14 background: repeating-linear-gradient(
15 0deg,
16 transparent,
17 transparent 2px,
18 rgba(0, 0, 0, 0.15) 2px,
19 rgba(0, 0, 0, 0.15) 4px
20 );
21}
22
23/* Horizontal zebra stripes */
24.zebra {
25 background: repeating-linear-gradient(
26 0deg,
27 rgba(0, 255, 65, 0.05),
28 rgba(0, 255, 65, 0.05) 40px,
29 transparent 40px,
30 transparent 80px
31 );
32}
33
34/* Repeating radial — target pattern */
35.target {
36 background: repeating-radial-gradient(
37 circle,
38 #00FF41,
39 #00FF41 10px,
40 #0D0D0D 10px,
41 #0D0D0D 20px
42 );
43}
44
45/* Repeating conic — starburst */
46.starburst {
47 background: repeating-conic-gradient(
48 #00FF41 0% 5%,
49 #0D0D0D 5% 10%
50 );
51}
52
53/* Checkerboard */
54.checkerboard {
55 background:
56 repeating-conic-gradient(#00FF41 0% 25%, #0D0D0D 0% 50%)
57 0 0 / 20px 20px;
58}
preview
Color Stops & Hints

Color stops define precise positions along the gradient line where colors transition. You can control exactly where each color begins and ends. Color hints (midpoints) let you fine-tune the transition curve between two stops.

color-stops.css
CSS
1/* Default — colors evenly spaced */
2.even { background: linear-gradient(90deg, red, green, blue); }
3
4/* Explicit stop positions */
5.custom-stops {
6 background: linear-gradient(
7 90deg,
8 red 0%,
9 green 50%,
10 blue 100%
11 );
12}
13
14/* Uneven stops for creative effects */
15.uneven {
16 background: linear-gradient(
17 90deg,
18 #00FF41 0%,
19 #00FF41 20%, /* solid green for first 20% */
20 #0D0D0D 20%, /* immediate switch to dark */
21 #0D0D0D 80%, /* solid dark in middle */
22 #00FF41 80%, /* immediate switch to green */
23 #00FF41 100% /* solid green for last 20% */
24 );
25}
26
27/* Transition hints — midpoint control */
28.hint {
29 /* Default transition: 25-50-75 */
30 background: linear-gradient(90deg, #00FF41, 50%, #0D0D0D);
31
32 /* With hint at 30% — transition accelerates */
33 background: linear-gradient(90deg, #00FF41, 30%, #0D0D0D);
34
35 /* With hint at 70% — transition decelerates */
36 background: linear-gradient(90deg, #00FF41, 70%, #0D0D0D);
37}
38
39/* Multiple stops for complex transitions */
40.complex {
41 background: linear-gradient(
42 90deg,
43 #00FF41 0%,
44 #FFB000 25%,
45 #3B82F6 50%,
46 #EF4444 75%,
47 #00FF41 100%
48 );
49}
preview
Gradient with Transparency

Gradients can incorporate transparency by using transparent color values or colors with alpha channels. This enables fade-to-edge effects, vignettes, and smooth overlays over images or other backgrounds.

gradient-transparency.css
CSS
1/* Fade to transparent */
2.fade-right {
3 background: linear-gradient(90deg, #00FF41, transparent);
4}
5
6.fade-bottom {
7 background: linear-gradient(180deg, transparent, #0D0D0D);
8}
9
10/* Vignette effect */
11.vignette {
12 background: radial-gradient(
13 ellipse at center,
14 transparent 50%,
15 rgba(0, 0, 0, 0.8) 100%
16 );
17}
18
19/* Image overlay with gradient */
20.image-overlay {
21 background:
22 linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 40%, transparent 60%, rgba(0, 0, 0, 0.7)),
23 url("photo.jpg") center/cover;
24}
25
26/* Terminal fade — edge vignette */
27.terminal-vignette {
28 background:
29 radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.6) 100%),
30 #0D0D0D;
31}
32
33/* Hero section gradient overlay */
34.hero-overlay {
35 background:
36 linear-gradient(135deg, rgba(0, 255, 65, 0.15), transparent 50%),
37 linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 30%),
38 url("hero.jpg") center/cover;
39}
preview
Practical Patterns

Here are practical gradient patterns commonly used in terminal-styled UIs and modern web design.

Terminal Theme Gradients

terminal-gradients.css
CSS
1/* Terminal accent bar */
2.terminal-accent {
3 background: linear-gradient(90deg, #00FF41, rgba(0,255,65,0.3), transparent);
4 height: 2px;
5}
6
7/* Terminal header gradient */
8.terminal-header {
9 background: linear-gradient(180deg, rgba(0,255,65,0.05), transparent);
10 border-bottom: 1px solid rgba(0,255,65,0.15);
11}
12
13/* Terminal glow background */
14.terminal-glow-bg {
15 background:
16 radial-gradient(ellipse 600px 200px at 50% 0%, rgba(0,255,65,0.08), transparent);
17}
18
19/* CRF scanline overlay */
20.crt-effect {
21 background:
22 repeating-linear-gradient(
23 0deg,
24 transparent,
25 transparent 2px,
26 rgba(0, 0, 0, 0.08) 2px,
27 rgba(0, 0, 0, 0.08) 4px
28 ),
29 #0D0D0D;
30}
31
32/* Loading bar skeleton */
33.loading-bar {
34 background: linear-gradient(
35 90deg,
36 transparent 0%,
37 rgba(0,255,65,0.2) 50%,
38 transparent 100%
39 );
40 background-size: 200% 100%;
41 animation: shimmer 1.5s infinite;
42}
43
44@keyframes shimmer {
45 0% { background-position: -200% 0; }
46 100% { background-position: 200% 0; }
47}
48
49/* Status indicator dots */
50.status-dot {
51 background: radial-gradient(circle, #00FF41, rgba(0,255,65,0.2));
52 width: 8px;
53 height: 8px;
54 border-radius: 50%;
55}
preview

Seamless Patterns

seamless-patterns.css
CSS
1/* Dot grid */
2.dot-grid {
3 background-image: radial-gradient(circle, rgba(0,255,65,0.1) 1px, transparent 1px);
4 background-size: 20px 20px;
5}
6
7/* Diagonal stripes */
8.diagonal-stripes {
9 background: repeating-linear-gradient(
10 -45deg,
11 transparent,
12 transparent 5px,
13 rgba(0,255,65,0.05) 5px,
14 rgba(0,255,65,0.05) 10px
15 );
16}
17
18/* Carbon fiber style */
19.carbon {
20 background:
21 repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,65,0.02) 3px, rgba(0,255,65,0.02) 4px),
22 repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0,255,65,0.02) 3px, rgba(0,255,65,0.02) 4px);
23}
preview
Best Practices
◆Use gradients instead of images for patterns — no HTTP requests, infinitely scalable, responsive by nature
◆Prefer oklch color interpolation for smoother, more natural-looking gradients (e.g. linear-gradient(in oklch, ...))
◆Use hard stops (adjacent identical positions) for crisp stripe patterns
◆Combine repeating gradients with background-size for precise pattern control
◆Layer gradients for complex effects — each layer is composited like photoshop layers
◆Avoid too many color stops in a single gradient — it can harm performance on low-end devices
◆Use transparent in gradients for fade-to-edge effects and image overlays
◆Set a background-color fallback when using gradient overlays on images
🔥

pro tip

Modern CSS supports interpolation in different color spaces via the in keyword: linear-gradient(in oklch, red, blue). The OKLCH color space produces perceptually uniform transitions without the muddy middle that sRGB often creates when interpolating between dissimilar hues.
← PreviousBackgrounds
Next →Shadows & Glows
$Blueprint — Engineering Documentation·Section ID: CSS-12·Revision: 1.0
Follow