இலவச CSS Gradient உருவாக்கி

இது எவ்வாறு செயல்படுகிறது

gradient generator CSS gradient strings ஐ நேரடியாக உலாவியில் உருவாக்குகிறது — நூலகம் இல்லை, சர்வர் இல்லை, பதிவேற்றம் இல்லை. கையால் எழுதிய function உங்கள் color stops மற்றும் கோணத்திலிருந்து சரியான linear-gradient, radial-gradient அல்லது conic-gradient syntax ஐ நேரலையாக உருவாக்கி, நீங்கள் தேர்ந்தெடுக்கும் வெளியீட்டு இலக்குக்கு முடிவை வடிவமைக்கிறது.

1. 1
   stops மற்றும் திசையை அமைக்கவும்

   உலாவியின் native color picker மூலம் 2 முதல் 6 color stops அமைத்து, range ஸ்லைடர் மூலம் ஒவ்வொரு stop ஐயும் 0–100% அச்சில் நிலைப்படுத்துகிறீர்கள். linear, conic gradients க்குக் கோணத்தையும் (0–360°) தேர்ந்தெடுக்கிறீர்கள்; radial gradients க்கு வடிவத்தையும் (ellipse அல்லது circle) gradient எவ்வளவு தூரம் நீள்கிறது என்பதைக் கட்டுப்படுத்தும் size keyword ஐயும் தேர்ந்தெடுக்கிறீர்கள்.
2. 2
   buildCss gradient string ஐ உருவாக்குகிறது

   ஒவ்வொரு மாற்றத்திலும், உள்ளூர் buildCss function உங்கள் அளவுருக்களைச் சரியான CSS function அழைப்பாக இணைக்கிறது — எ.கா. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). எந்த நூலகமும் இல்லை; string எளிய JavaScript template தர்க்கத்தால் உருவாக்கப்பட்டு stop array இலிருந்து நேரடியாக இணைக்கப்படுகிறது.
3. 3
   நேரலை முன்னோட்டம் inline style வழியாகக் காட்டப்படுகிறது

   உருவாக்கப்பட்ட gradient string ஒரு div உறுப்பில் inline background style ஆக நேரடியாகப் பயன்படுத்தப்படுகிறது; உலாவியின் சொந்த CSS இயந்திரம் முன்னோட்டத்தைக் காட்டுகிறது. canvas அல்லது படம் எதுவும் இல்லை — நீங்கள் காண்பது பயன்படுத்தப்படும் CSS property தான்.
4. 4
   நான்கு வடிவங்களில் நகலெடுக்கத் தயாரான வெளியீடு

   வடிவத் தேர்வி அதே gradient string ஐ எளிய CSS (background: ...), solid fallback உடன் CSS block, Tailwind arbitrary-value class அல்லது SCSS variable declaration ஆக மாற்றுகிறது. நகலெடு என்பதைக் கிளிக் செய்தால் தேர்ந்தெடுத்த வெளியீடு navigator.clipboard.writeText வழியாகக் கிளிப்போர்டில் எழுதப்படும். தற்போதைய gradient URL hash இலும் குறியாக்கப்படுகிறது; எனவே புக்மார்க் செய்யலாம் அல்லது பகிரலாம்.

தொடர்புடைய கருவிகள்