Gradients: Linear and Radial

CSS gradient అనేది ఒక రంగు నుంచి మరొక రంగుకు మెల్లగా మారే background effect. దీనితో plain color కంటే ఆకర్షణీయమైన backgrounds మరియు cards తయారు చేయవచ్చు.

Linear Gradient

linear-gradient() రంగులను ఒక straight line దిశలో మార్చుతుంది. ఈ దిశ పై నుంచి కిందకు, ఎడమ నుంచి కుడికి లేదా ఒక angleలో ఉండవచ్చు.

ఉదాహరణ: background: linear-gradient(to right, #2563eb, #7c3aed);

ఇక్కడ gradient ఎడమ వైపు ఉన్న నీలం రంగు నుంచి కుడి వైపు ఉన్న ఊదా రంగుకు మారుతుంది.

Radial Gradient

radial-gradient() రంగులను ఒక కేంద్ర బిందువు నుంచి బయటకు వృత్తాకారంగా లేదా oval ఆకారంగా మార్చుతుంది.

ఉదాహరణ: background: radial-gradient(circle, #fef3c7, #f97316);

ఇక్కడ మధ్యలో లేత పసుపు రంగు ఉంటుంది. అది బయటకు వెళ్తూ orange రంగుగా మారుతుంది.

Color Stops

Gradientలో ఉపయోగించే ప్రతి రంగును color stop అంటారు. రెండు లేదా అంతకంటే ఎక్కువ రంగులు ఇవ్వవచ్చు. Browser ఆ రంగుల మధ్యలోని మార్పును స్వయంగా చూపిస్తుంది.

ఎప్పుడు ఉపయోగించాలి?

Hero sections మరియు banners కోసం.
Call-to-action cards కోసం.
Buttons లేదా decorative backgrounds కోసం.
Plain backgroundకు depth ఇవ్వడానికి.

ముఖ్యమైన syntax

linear-gradient(direction, color1, color2)
radial-gradient(shape, color1, color2)
Gradientను సాధారణంగా background లేదా background-image propertyతో apply చేస్తారు.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Gradients</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      padding: 30px;
    }

    .gradient-card {
      color: white;
      padding: 25px;
      margin-bottom: 20px;
      border-radius: 12px;
    }

    .linear-card {
      background: linear-gradient(to right, #2563eb, #7c3aed);
    }

    .radial-card {
      background: radial-gradient(circle, #f59e0b, #b91c1c);
    }
  </style>
</head>
<body>
  <section class="gradient-card linear-card">
    <h2>Linear Gradient</h2>
    <p>The colors move in a straight direction.</p>
  </section>

  <section class="gradient-card radial-card">
    <h2>Radial Gradient</h2>
    <p>The colors spread from the center.</p>
  </section>
</body>
</html>

Simple Explanation

Gradient అంటే ఒక రంగు నుంచి మరో రంగుకు smoothగా జరిగే color transition. linear-gradient()లో రంగులు ఒక straight directionలో మారతాయి. radial-gradient()లో రంగులు center నుంచి బయటకు వ్యాపిస్తాయి. Gradientను CSSలో background property valueగా రాస్తాము. HTML elementకు సరైన class ఇచ్చినప్పుడు ఆ elementపై gradient కనిపిస్తుంది.

Real-Life Example

ఒక సూర్యోదయ bannerను ఊహించుకోండి. ఆకాశంలో పై భాగం నీలంగా ఉండి, కిందికి వస్తూ orange రంగుగా మారితే అది linear gradient లాంటిది. ఒక spotlight మధ్యలో ప్రకాశవంతంగా ఉండి బయటకు వెళ్తూ మసకబారితే అది radial gradient లాంటిది.

Code Examples

Linear మరియు Radial Gradients Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Gradients</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      padding: 30px;
    }

    .gradient-card {
      color: white;
      padding: 25px;
      margin-bottom: 20px;
      border-radius: 12px;
    }

    .linear-card {
      background: linear-gradient(to right, #2563eb, #7c3aed);
    }

    .radial-card {
      background: radial-gradient(circle, #f59e0b, #b91c1c);
    }
  </style>
</head>
<body>
  <section class="gradient-card linear-card">
    <h2>Linear Gradient</h2>
    <p>The colors move in a straight direction.</p>
  </section>

  <section class="gradient-card radial-card">
    <h2>Radial Gradient</h2>
    <p>The colors spread from the center.</p>
  </section>
</body>
</html>

మొదటి sectionకు linear gradient ఇవ్వబడింది. అందులో రంగులు ఎడమ నుంచి కుడికి మారతాయి. రెండవ sectionకు radial gradient ఇవ్వబడింది. అందులో orange రంగు మధ్యలో ఉండి బయటికి dark redగా మారుతుంది. రెండు cardsలో common spacing మరియు text color కోసం ఒకే class ఉపయోగించబడింది.

Browserలో లేత gray page కనిపిస్తుంది. మొదటి card ఎడమ వైపు blue నుంచి కుడి వైపు purpleగా మారే linear gradientతో కనిపిస్తుంది. రెండవ card మధ్యలో orange నుంచి బయటికి dark redగా మారే radial gradientతో కనిపిస్తుంది.

Line-by-Line Explanation

.gradient-card {
ఈ selector gradient-card class ఉన్న elementsను ఎంచుకుంటుంది. రెండు cardsకు ఒకే common styling ఇవ్వడానికి ఇది ఉపయోగపడుతుంది.

color: white;
Cardలోని text తెలుపు రంగులో కనిపిస్తుంది. Dark gradient backgroundపై text స్పష్టంగా కనిపించడానికి ఇది సహాయపడుతుంది.

padding: 25px;
Card content చుట్టూ లోపలి ఖాళీని ఇస్తుంది. అందువల్ల text gradient అంచులకు అంటుకోకుండా ఉంటుంది.

margin-bottom: 20px;
ఒక card కింద మరో cardకు మధ్య 20px ఖాళీ ఉంటుంది.

.linear-card {
linear-card class ఉన్న మొదటి sectionను ఎంచుకుంటుంది.

background: linear-gradient(to right, #2563eb, #7c3aed);
ఇది left-to-right linear gradientను సృష్టిస్తుంది. #2563eb నుంచి #7c3aed వరకు రంగు మెల్లగా మారుతుంది.

.radial-card {
radial-card class ఉన్న రెండవ sectionను ఎంచుకుంటుంది.

background: radial-gradient(circle, #f59e0b, #b91c1c);
ఇది circular radial gradientను సృష్టిస్తుంది. మధ్యలో orange రంగు ఉండి బయటికి dark red రంగుగా మారుతుంది.

ఈ HTML sectionకు రెండు classes ఉన్నాయి. gradient-card common stylingను, linear-card linear gradientను ఇస్తాయి.

ఈ sectionకు gradient-card common stylingతో పాటు radial-card radial gradientను ఇస్తుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gradient Practice</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
      background: #f3f4f6;
    }

    .banner {
      color: white;
      padding: 30px;
      margin-bottom: 20px;
      border-radius: 12px;
      background: linear-gradient(to right, #0f766e, #2563eb);
    }

    .spotlight {
      color: white;
      padding: 30px;
      border-radius: 12px;
      background: radial-gradient(circle, #facc15, #ea580c);
    }
  </style>
</head>
<body>
  <section class="banner">
    <h2>Welcome Banner</h2>
    <p>This background uses a linear gradient.</p>
  </section>

  <section class="spotlight">
    <h2>Spotlight Card</h2>
    <p>This background uses a radial gradient.</p>
  </section>
</body>
</html>

Try It Yourself »

Practice

Practice: పై starter codeలో .hero యొక్క linear gradient directionను to right నుంచి 135degగా మార్చండి. తర్వాత .badge radial gradientలో center colorను orange నుంచి yellowగా మార్చండి.

Hint: మొదటి మార్పు కోసం linear-gradient(135deg, ...) రాయండి. రెండవ మార్పు కోసం radial-gradient(circle, yellow, ...) రాయండి.

Common Mistakes

Student linear-gradient లేదా radial-gradient తర్వాత parentheses పెట్టకుండా రాస్తాడు.
Gradient functionకు parentheses అవసరం. ఉదాహరణ: background: linear-gradient(to right, blue, purple);

Gradientను background: linear-gradient;లా colors లేకుండా రాస్తాడు.
కనీసం రెండు color values ఇవ్వాలి. ఉదాహరణ: background: linear-gradient(blue, purple);

linear gradientలో direction మరియు colorsను తప్పు క్రమంలో రాస్తాడు.
సరైన క్రమం linear-gradient(direction, color1, color2). Direction ఇవ్వకపోతే browser default directionను ఉపయోగిస్తుంది.

CSS propertyగా gradient అని రాస్తాడు.
Gradient ఒక ప్రత్యేక property కాదు. దాన్ని background లేదా background-image valueగా ఉపయోగించాలి.

Dark gradientపై dark text ఉంచి text చదవడం కష్టంగా చేస్తాడు.
Gradient backgroundకు సరైన contrast కోసం textకు color: white; లేదా తగిన light color ఇవ్వండి.

Interview Questions

CSS gradient అంటే ఏమిటి?

Answer: Gradient అనేది ఒక రంగు నుంచి మరో రంగుకు smoothగా మారే visual effect. దీన్ని backgrounds మరియు decorative areasలో ఉపయోగిస్తారు.

linear-gradient() మరియు radial-gradient() మధ్య తేడా ఏమిటి?

Answer: linear-gradient()లో రంగులు ఒక straight directionలో మారతాయి. radial-gradient()లో రంగులు center నుంచి బయటకు వృత్తాకారంగా లేదా oval ఆకారంగా మారతాయి.

Linear gradientకు direction ఎలా ఇస్తారు?

Answer: Directionను to right, to bottom లేదా 135deg వంటి valueలతో ఇవ్వవచ్చు.

Gradientను ఏ CSS propertyతో ఉపయోగించవచ్చు?

Answer: సాధారణంగా gradientను background లేదా background-image property valueగా ఉపయోగిస్తారు.

Exam Questions

క్రింది codeలో ఏది linear gradientను సృష్టిస్తుంది? background: linear-gradient(to right, red, blue);

Answer:

ఇది ఎడమ నుంచి కుడికి red నుంచి blueకి మారే linear gradientను సృష్టిస్తుంది.

Radial gradientలో రంగులు ఎక్కడి నుంచి వ్యాపిస్తాయి?

Answer:

Radial gradientలో రంగులు సాధారణంగా center నుంచి బయటకు వ్యాపిస్తాయి.

రెండు రంగులతో radial gradient రాయండి.

Answer:

background: radial-gradient(circle, yellow, orange);

Gradientకు color stops అంటే ఏమిటి?

Answer:

Gradientలో ఉపయోగించే రంగులను color stops అంటారు. Browser ఆ రంగుల మధ్య smooth transitionను చూపిస్తుంది.

Quick Revision

Gradient ఒక రంగు నుంచి మరో రంగుకు smooth transition.
linear-gradient() రంగులను straight directionలో మారుస్తుంది.
radial-gradient() రంగులను center నుంచి బయటకు వ్యాపింపజేస్తుంది.
Gradientను సాధారణంగా background propertyతో ఉపయోగిస్తారు.
Syntaxలో direction లేదా shape తర్వాత color stops ఇవ్వవచ్చు.
Text readableగా ఉండేందుకు gradient మరియు text మధ్య మంచి contrast ఉంచాలి.

Gradients: Linear and Radial