CSS గ్రేడియంట్ జనరేటర్: లీనియర్, రేడియల్, కోనిక్ – ఉచితం
ఉచితం, సైన్ అప్ అవసరం లేదు, మీ బ్రౌజర్‌లోనే పనిచేస్తుంది. 2 నుండి 8 రంగుల గ్రేడియంట్‌ను లైవ్‌లో డిజైన్ చేసి CSS కోడ్‌ను కాపీ చేయండి. PNG చిత్రంగా కూడా డౌన్‌లోడ్ చేసుకోవచ్చు.
రంగు స్టాప్‌లు
- 0%
- 100%
CSS
background: #ff7ac6; background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);
మొదటి లైన్ గ్రేడియంట్లు చూపించలేని చాలా పాత పరికరాల కోసం ఘన రంగు.
ప్రీసెట్‌తో ప్రారంభించండి
మీ పరికరంలోనే తయారు చేయబడింది.
CSS గ్రేడియంట్ జనరేటర్ను ఎందుకు ఉపయోగించాలి
- 100% ఉచితం
- మీకు నచ్చినంతసారి ఉపయోగించండి. సైన్ అప్ లేదు, వాటర్‌మార్క్ లేదు, ఏదీ ఇన్‌స్టాల్ చేయనవసరం లేదు.
- డిజైన్‌లోనే గోప్యత
- మీరు టైప్ చేసేది మీ బ్రౌజర్‌లోనే ఉంటుంది, ఎప్పుడూ మాకు పంపబడదు.
- ఏ పరికరంలోనైనా పనిచేస్తుంది
- Windows, Mac, Linux, Android మరియు iPhone లలోని మీ బ్రౌజర్‌లో నడుస్తుంది. యాప్ అవసరం లేదు.
CSS గ్రేడియంట్ జనరేటర్ను ఎలా ఉపయోగించాలి
- రకం ఎంచుకోండి: లీనియర్, రేడియల్ లేదా కోనిక్. స్లయిడర్‌తో దిశను సెట్ చేయండి, లేదా రేడియల్ కోసం సర్కిల్ లేదా ఎలిప్స్ ఎంచుకోండి.
- రంగు స్టాప్‌ల కింద ప్రతి రంగును ఎంచుకోండి లేదా కోడ్ టైప్ చేయండి, దాని స్లయిడర్‌ను లాగి స్థానం సెట్ చేయండి. 8 వరకు మరిన్ని రంగుల కోసం 'స్టాప్ జోడించండి' నొక్కండి, క్రమాన్ని తిప్పడానికి 'రివర్స్' నొక్కండి.
- లేదా 'ప్రీసెట్ నుంచి ప్రారంభించండి' కింద ఉన్న ఒక ప్రీసెట్‌ను నొక్కి, అక్కడి నుంచి మార్చండి.
- 'CSS కాపీ చేయండి' నొక్కి మీ స్టైల్‌షీట్‌లో అతికించండి, లేదా 'చిత్ర సైజు' ఎంచుకుని 'PNG డౌన్‌లోడ్ చేయండి' నొక్కండి.
తరచుగా అడిగే ప్రశ్నలు
CSS ను ఎలా ఉపయోగించాలి?
మీరు రంగు వేయాలనుకునే ఎలిమెంట్ రూల్‌లో రెండు లైన్లనూ అతికించండి, ఉదాహరణకు body లేదా బటన్. మొదటి లైన్ ఘన రంగు బ్యాకప్; రెండవది గ్రేడియంట్.
లీనియర్, రేడియల్ మరియు కోనిక్ మధ్య తేడా ఏమిటి?
లీనియర్ ఒక సరళ రేఖ వెంట కలుస్తుంది, రేడియల్ కేంద్రం నుండి వృత్తం లేదా దీర్ఘవృత్తంలో వ్యాపిస్తుంది, కోనిక్ రంగుల చక్రం లేదా పై చార్ట్ లాగా కేంద్రం చుట్టూ తిరుగుతుంది.
లీనియర్ గ్రేడియంట్ దిశను ఎలా మార్చాలి?
Direction స్లయిడర్‌ను 0° నుండి 360° వరకు లాగండి. 0° కింద నుంచి పైకి, 90° ఎడమ నుంచి కుడికి, 180° పై నుంచి కిందకి, 135° వికర్ణంగా కుడి కింది మూలకు వెళ్తుంది.
గ్రేడియంట్‌లో ఎన్ని రంగులు ఉండవచ్చు?
2 నుండి 8 రంగు స్టాప్‌లు. ప్రతి స్టాప్‌కు 0% నుండి 100% వరకు స్థానం ఉంటుంది; రెండు స్టాప్‌లను ఒకే స్థానంలో పెడితే రంగుల మధ్య కలవకుండా గట్టి గీత వస్తుంది.
పారదర్శకత ఉపయోగించవచ్చా?
అవును. ఒక స్టాప్‌లో rgba(47, 91, 255, 0.5) వంటి రంగు లేదా 8-అంకెల HEX కోడ్ టైప్ చేయండి, అక్కడ గ్రేడియంట్ అవతలి వైపు కనిపించేలా మసకబారుతుంది.
గ్రేడియంట్‌ను చిత్రంగా డౌన్‌లోడ్ చేయవచ్చా?
అవును. 1920 × 1080, 3840 × 2160, 1080 × 1080, 1080 × 1920 లేదా 1500 × 500 ఎంచుకుని PNG డౌన్‌లోడ్ చేయండి నొక్కండి. వాల్‌పేపర్, స్లయిడ్, సోషల్ పోస్ట్ లేదా హెడర్ కోసం ఉపయోగించవచ్చు.
CSS Tailwind, React లేదా WordPress తో పనిచేస్తుందా?
అవును. ఇది సాధారణ CSS, కాబట్టి దాన్ని మీ స్టైల్‌షీట్‌లో ఒక క్లాస్‌గా (లేదా కస్టమ్ CSS బాక్స్‌లో) ఉంచి, ఆ క్లాస్‌ను ఎలిమెంట్‌కు జోడించండి. ప్రతి ఆధునిక బ్రౌజర్‌లో పనిచేస్తుంది.
ఏదైనా అప్‌లోడ్ అవుతుందా?
లేదు. గ్రేడియంట్లు మీ పరికరంలోనే తయారవుతాయి.
CSS గ్రేడియంట్ జనరేటర్ ఉచితమా?
అవును. ఉపయోగించడం ఉచితం; సైన్ అప్ అవసరం లేదు, ఏదీ ఇన్‌స్టాల్ చేయనవసరం లేదు.
సహాయం మరియు ఎలా చేయాలో మార్గదర్శకాలు (ఆంగ్లంలో)
- CSS Gradient Text: background-clip Method (Free Generator)Make CSS gradient text with background-clip: text and a transparent fill. Copy a gradient from a free generator, add a solid fallback, check contrast.
- Linear vs Radial vs Conic Gradient CSS (Free Generator)Linear gradients blend along a line, radial from a centre, conic sweep around it. Syntax, examples and when to use each in CSS, with a free gradient generator.
- Christmas Color Palette Ideas with HEX Codes (Free)Five Christmas colour palettes with HEX codes, from classic red and green to Nordic and midnight blue, with contrast-checked text pairs. Build more free.
- Holi Colors: Gulal Color Palette with HEX Codes (Free)Holi colours as HEX codes for posters, invites and social posts: gulal pink, marigold, kesari, green, blue, purple, with readable text. Free palette generator.
సంబంధిత సాధనాలు
- రంగుల పాలెట్ జనరేటర్స్పేస్ బార్తో ఐదు రంగుల పాలెట్ తయారు చేయండి, మీ రంగు నుంచి స్కీమ్ తీయండి. ప్రతి రంగుకు 11 షేడ్లు; CSS, Tailwind, JSON, HEXగా ఎగుమతి.
- HEX నుండి RGB రంగు కన్వర్టర్HEX ను RGB కు, RGB ను HEX కు మార్చండి. ఏ ఫార్మాట్ రంగు కోడ్ అయినా అతికిస్తే HEX, RGB, HSL, HSV, CMYK ఒకేసారి వస్తాయి.
- రంగు కాంట్రాస్ట్ చెకర్టెక్స్ట్ రంగు, నేపథ్య రంగు నమోదు చేసి WCAG కాంట్రాస్ట్ నిష్పత్తిని, AA, AAA ఫలితాలను చూడండి. విఫలమైతే, దగ్గరగా ఉన్న ఉత్తీర్ణ రంగును క్లిక్ చేయండి.