CSS Gradients

किसी canvas पर paint करने की कल्पना करें। अगर आप standard colors इस्तेमाल करते हैं, तो आप blue या red के solid blocks paint करते हैं। bold होते हुए भी, flat color blocks थोड़े simple दिख सकते हैं। अब, एक soft color blend इस्तेमाल करने की कल्पना करें। आप अपने blue paint को smoothly red में blend करते हैं, एक खूबसूरत gradient transition बनाते हुए। Gradients वही smooth color blends हैं। अलग-अलग gradient patterns इस्तेमाल करके, आप colors को horizontally, radially, या circles में blend कर सकते हैं, भारी image files load किए बिना gorgeous, professional backgrounds बनाते हुए।

In this page:

Linear Gradient
Radial Gradient
Conic Gradient
Repeating Gradients
Text Gradients

Syntax

css

selector {
  background: linear-gradient(direction, color1, color2);
  background: radial-gradient(shape, color1, color2);
  background: conic-gradient(color1, color2);
}

Linear Gradient

Linear gradients colors को एक straight, directional axis के साथ blend करते हैं। आप color blend की direction degrees (जैसे 90deg) या simple direction keywords (जैसे 'to right') इस्तेमाल करके define कर सकते हैं।

Note:

linear gradients को background-image properties के रूप में इस्तेमाल करें, क्योंकि browsers gradients को natively image assets की तरह treat करते हैं।
Accepted values:
linear-gradient(direction, colors) — straight line, जैसे to right या 45deg
radial-gradient(shape, colors) — circular या elliptical
conic-gradient(colors) — colors एक center के चारों ओर rotate होते हैं
repeating-linear-gradient() — gradient को tile करता है
color stop — एक color जिसके बाद red 30% जैसी एक position हो

Warning: बीच के stops के बिना सीधे contrasting complementary colors को blend करने से बचें, क्योंकि यह एक muddy gray transition area बना सकता है।

उदाहरण: The Linear Gradient

css

<style>
.box {
  height: 100px;
  background: linear-gradient(90deg, red, blue);
}
</style>
<div class="box"></div>

Radial Gradient

Radial gradients colors को concentric circles या ellipses में बाहर की तरफ़ blend करते हैं, एक central point से शुरू होकर container के outer edges की तरफ़ smoothly fade होते हुए। Default रूप से circles या ellipses element के center से शुरू होते हैं, हालांकि आप उस starting point को reposition कर सकते हैं।

Note:

खूबसूरत glowing spheres या soft spotlight background effects बनाने के लिए radial gradients इस्तेमाल करें।
Accepted values:
radial-gradient(color, color) — center से default ellipse
circle — एक circular shape force करता है
ellipse — default shape
closest-side | closest-corner | farthest-side | farthest-corner — gradient size set करता है (default farthest-corner)
at <position> — center को move करता है (जैसे at top left)

Warning: लंबे, non-square container layouts पर लागू होने पर radial gradients stretched दिख सकते हैं।

उदाहरण: The Radial Gradient

css

<style>
.box {
  height: 100px;
  background: radial-gradient(circle, yellow, orange);
}
</style>
<div class="box"></div>

Conic Gradient

Conic gradients colors को एक central 360-degree rotation axis के चारों ओर blend करते हैं, ऊपर से देखने पर बिल्कुल एक color wheel या किसी pie chart section जैसे दिखते हुए। यह conic gradients को pure CSS में progress rings, color pickers, या pie-chart-style visualizations बनाने के लिए ideal बनाता है।

Note:

साफ़ CSS pie charts, progress rings, या abstract color wheels आसानी से बनाने के लिए conic gradients इस्तेमाल करें।
Accepted values:
conic-gradient(color, color) — colors एक center point के चारों ओर sweep करते हैं
from <angle> — starting angle rotate करता है
at <position> — center move करता है
<color> <angle> — किसी दिए गए angle या percentage पर color stop

Warning: Conic gradients एक नयी CSS standard हैं, इसलिए legacy projects पर इस्तेमाल करने से पहले compatibility check करें।

उदाहरण: The Conic Gradient

css

<style>
.box {
  height: 100px;
  background: conic-gradient(red, yellow, green, blue, red);
}
</style>
<div class="box"></div>

Repeating Gradients

Repeating gradients आपको अपने color blends को अपने container में infinitely repeat करने देते हैं, striped patterns, badges, या custom textures को बस कुछ lines code से बनाना आसान बनाते हुए।

Note:

classic progress bar stripes या warning banners आसानी से बनाने के लिए repeating-linear-gradient इस्तेमाल करें।
Accepted values:
repeating-linear-gradient(...) — एक linear gradient को tile करता है
repeating-radial-gradient(...) — एक radial gradient को tile करता है
repeating-conic-gradient(...) — एक conic gradient को tile करता है
<color> <length> — आख़िरी stop length repeat interval set करती है

Warning: सुनिश्चित करें कि आपके color transitions साफ़ तरीके से styled हैं ताकि आपके striped patterns blurry न दिखें।

उदाहरण: Repeating Gradients

css

<style>
.box {
  height: 100px;
  background: repeating-linear-gradient(45deg, red, red 10px, white 10px, white 20px);
}
</style>
<div class="box"></div>

Text Gradients

अपनी webpage text पर एक खूबसूरत color blend लागू करने के लिए, आप अपने text characters के अंदर एक background gradient को mask करने के लिए background-clip: text इस्तेमाल कर सकते हैं, अपनी typography को साफ़ और modern रखते हुए।

Note:

background gradient को through दिखने देने के लिए हमेशा text color property को transparent (color: transparent) set करें।
Accepted values:
background: linear-gradient(...) — gradient fill
background-clip: text — background को glyphs तक clip करता है
webkit-background-clip: text — पुराने WebKit/Blink के लिए prefixed form
color: transparent — clipped background को reveal करता है

Warning: कुछ पुराने browsers को text gradients सही तरीके से दिखाने के लिए vendor prefixes (जैसे -webkit-background-clip) चाहिए होते हैं।

उदाहरण: Text Gradients

css

<style>
h1 {
  background: linear-gradient(90deg, purple, orange);
  background-clip: text;
  color: transparent;
}
</style>
<h1>Gradient Text</h1>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Relative Units Next Lesson → CSS Shadows

CSS Gradients

Linear Gradient

Radial Gradient

Conic Gradient

Repeating Gradients

Text Gradients

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code