ఉచిత కన్వర్టర్

CSS గ్రేడియంట్ జనరేటర్

ప్రత్యక్ష ప్రివ్యూతో దృశ్యమానంగా CSS గ్రేడియంట్‌లను రూపొందించండి. కస్టమ్ కలర్ స్టాప్‌లతో లీనియర్, రేడియల్ మరియు కోనిక్ గ్రేడియంట్‌లను సృష్టించండి — ఉచిత మరియు క్లయింట్ వైపు.

ప్రత్యక్ష ప్రివ్యూ
CSS అవుట్‌పుట్
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
కోణం (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

ఈ సాధనం గురించి

దృశ్య ఎడిటర్‌తో అందమైన CSS లీనియర్ మరియు రేడియల్ గ్రేడియంట్‌లను సృష్టించండి. రంగులను ఎంచుకోండి, స్టాప్‌లను సర్దుబాటు చేయండి, దిశ లేదా కోణాన్ని మార్చండి మరియు నిజ సమయంలో ప్రత్యక్ష ప్రివ్యూ అప్‌డేట్‌ను చూడండి. పాత బ్రౌజర్‌ల కోసం వెండర్ ప్రిఫిక్స్‌లతో సహా - ఉత్పత్తి చేయబడిన CSS కోడ్‌ను కాపీ చేయండి మరియు దానిని నేరుగా మీ స్టైల్‌షీట్‌లో అతికించండి.

ఎలా ఉపయోగించాలి

  1. గ్రేడియంట్ రకాన్ని ఎంచుకోండి: లీనియర్ లేదా రేడియల్.
  2. గ్రేడియంట్ బార్‌ని క్లిక్ చేసి, రంగులను ఎంచుకోవడం ద్వారా కలర్ స్టాప్‌లను జోడించండి.
  3. నియంత్రణలను ఉపయోగించి ప్రవణత కోణం (సరళ) లేదా స్థానం (రేడియల్) సర్దుబాటు చేయండి.
  4. అవుట్‌పుట్ ప్యానెల్ నుండి ఉత్పత్తి చేయబడిన CSS కోడ్‌ను కాపీ చేయండి.

తరచుగా అడిగే ప్రశ్నలు

అన్ని బ్రౌజర్‌లలో CSS గ్రేడియంట్లు పని చేస్తాయా?
Chrome, Firefox, Safari మరియు Edgeతో సహా అన్ని ప్రస్తుత బ్రౌజర్‌లలో ఆధునిక CSS గ్రేడియంట్లు (లీనియర్-గ్రేడియంట్, రేడియల్-గ్రేడియంట్) మద్దతునిస్తాయి. సాధనం ఐచ్ఛికంగా పాత బ్రౌజర్ సంస్కరణల కోసం -webkit- ఉపసర్గలను రూపొందించగలదు.
నేను బహుళ-రంగు ప్రవణతలను సృష్టించవచ్చా?
అవును. మీకు అవసరమైనన్ని రంగుల స్టాప్‌లను జోడించండి. రంగులు ఎక్కడ మిళితం అవుతుందో నియంత్రించడానికి మీరు ప్రతి స్టాప్ స్థానాన్ని కూడా సర్దుబాటు చేయవచ్చు. ఇది సంక్లిష్ట ఇంద్రధనస్సు, సూర్యాస్తమయం లేదా అనుకూల బ్రాండ్ ప్రవణతలను అనుమతిస్తుంది.
లీనియర్ మరియు రేడియల్ గ్రేడియంట్స్ మధ్య తేడా ఏమిటి?
లీనియర్ గ్రేడియంట్స్ ట్రాన్సిషన్ రంగులను సరళ రేఖ వెంట (ఎగువ నుండి క్రిందికి, ఎడమ నుండి కుడికి, వికర్ణం లేదా ఏదైనా కోణం). రేడియల్ ప్రవణతలు వృత్తాకార లేదా దీర్ఘవృత్తాకార ఆకారంలో మధ్య బిందువు నుండి రంగులను బయటికి మారుస్తాయి.
నేను వచనానికి నేపథ్యంగా గ్రేడియంట్‌ని ఉపయోగించవచ్చా?
అవును. బ్యాక్‌గ్రౌండ్-క్లిప్: టెక్స్ట్‌ని -వెబ్‌కిట్-టెక్స్ట్-ఫిల్-కలర్‌తో ఉపయోగించండి: టెక్స్ట్‌కి గ్రేడియంట్‌ను వర్తింపజేయడానికి పారదర్శకంగా ఉంటుంది. ఉత్పత్తి చేయబడిన CSS గ్రేడియంట్ డెఫినిషన్‌ను అందిస్తుంది — గ్రేడియంట్ టెక్స్ట్ కోసం ఈ లక్షణాలతో దీన్ని కలపండి.