CSS radial-gradient() फ़ंक्शन

परिभाषा और उपयोग

CSS radial-gradient() तंत्रिका को पृष्ठभूमि इमेज के रूप में रेखीय ग्रेडिएंट सेट करती है。

रेखीय ग्रेडिएंट अपने केंद्र से परिभाषित होता है。

रेखीय ग्रेडिएंट बनाने के लिए कम से कम दो रेखांकनों को परिभाषित करना आवश्यक है。

रेखीय ग्रेडिएंट उदाहरण:

उदाहरण

उदाहरण 1

रेखांकन समान वितरण के साथ रेखीय ग्रेडिएंट:

#grad {
  background-image: radial-gradient(red, green, blue);
}

अपने आप उसे प्रयोग करें

उदाहरण 2

विभिन्न रेखांकन वितरण के साथ रेखीय ग्रेडिएंट:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

अपने आप उसे प्रयोग करें

उदाहरण 3

वृत्ताकार आकार के रेखीय ग्रेडिएंट:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

अपने आप उसे प्रयोग करें

उदाहरण 4

विभिन्न आकार शब्दों के साथ रेखीय ग्रेडिएंट का इस्तेमाल करें:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

अपने आप उसे प्रयोग करें

CSS व्याकरण

radial-gradient(shape size at position, start-color, ... , last-color);

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र संस्करण को दर्शाते हैं。

संबंधित पृष्ठ

तस्वीरीया:CSS ग्रेडिएंट

संदर्भ:सीएसएस बैकग्राउंड-इमेज गुण

संदर्भ:CSS conic-gradient() फ़ंक्शन

संदर्भ:CSS linear-gradient() फ़ंक्शन

संदर्भ:CSS repeating-conic-gradient() फ़ंक्शन

संदर्भ:CSS repeating-linear-gradient() फ़ंक्शन

संदर्भ:CSS repeating-radial-gradient() फ़ंक्शन