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

ఇది ఎలా పనిచేస్తుంది

గ్రేడియంట్ జనరేటర్ CSS గ్రేడియంట్ స్ట్రింగ్‌లను నేరుగా బ్రౌజర్‌లో నిర్మిస్తుంది — లైబ్రరీ లేదు, సర్వర్ లేదు, అప్‌లోడ్ లేదు. చేతితో రాసిన ఫంక్షన్ మీ color stops మరియు కోణం నుండి సరైన linear-gradient, radial-gradient, లేదా conic-gradient సింటాక్స్‌ను రియల్ టైమ్‌లో కూర్చి, మీరు ఎంచుకున్న అవుట్‌పుట్ లక్ష్యానికి ఫలితాన్ని ఫార్మాట్ చేస్తుంది.

1. 1
   Stops మరియు దిశను కాన్ఫిగర్ చేయండి

   మీరు బ్రౌజర్ స్థానిక color picker ఉపయోగించి 2 నుండి 6 color stops సెట్ చేసి, range స్లైడర్‌తో ప్రతి stopను 0–100% అక్షం వెంట ఉంచుతారు. linear మరియు conic గ్రేడియంట్‌లకు మీరు కోణం (0–360°) కూడా ఎంచుకుంటారు; radial గ్రేడియంట్‌లకు ఆకారం (ellipse లేదా circle) మరియు గ్రేడియంట్ ఎంత దూరం విస్తరిస్తుందో నియంత్రించే size కీవర్డ్ ఎంచుకుంటారు.
2. 2
   buildCss గ్రేడియంట్ స్ట్రింగ్‌ను కూర్చుతుంది

   ప్రతి మార్పుపై, లోకల్ buildCss ఫంక్షన్ మీ పారామితులను సరైన CSS ఫంక్షన్ కాల్‌గా కలుపుతుంది — ఉదా. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). ఏ లైబ్రరీ ప్రమేయం లేదు; స్ట్రింగ్ సాదా JavaScript template తర్కంతో నిర్మించబడి stop array నుండి నేరుగా కలుపబడుతుంది.
3. 3
   లైవ్ ప్రివ్యూ ఇన్‌లైన్ స్టైల్ ద్వారా చూపబడుతుంది

   కూర్చిన గ్రేడియంట్ స్ట్రింగ్ ఇన్‌లైన్ background స్టైల్‌గా నేరుగా div ఎలిమెంట్‌కు వర్తింపజేయబడుతుంది, కాబట్టి బ్రౌజర్ సొంత CSS ఇంజిన్ ప్రివ్యూను చూపుతుంది. canvas లేదా చిత్రం ప్రమేయం లేదు — మీరు చూసేది అక్షరాలా వర్తింపజేయబడుతున్న CSS ప్రాపర్టీ.
4. 4
   నాలుగు ఫార్మాట్‌లలో కాపీకి సిద్ధమైన అవుట్‌పుట్

   ఫార్మాట్ సెలెక్టర్ అదే గ్రేడియంట్ స్ట్రింగ్‌ను సాదా CSS (background: ...), CSS-with-solid-fallback బ్లాక్, Tailwind arbitrary-value క్లాస్, లేదా SCSS variable డిక్లరేషన్‌గా మారుస్తుంది. కాపీ క్లిక్ చేస్తే ఎంచుకున్న అవుట్‌పుట్ navigator.clipboard.writeText ద్వారా క్లిప్‌బోర్డ్‌కు రాయబడుతుంది. ప్రస్తుత గ్రేడియంట్ URL hashలో కూడా ఎన్‌కోడ్ చేయబడుతుంది, కాబట్టి దాన్ని బుక్‌మార్క్ లేదా షేర్ చేయవచ్చు.

సంబంధిత సాధనాలు