ఉచిత CSS బాక్స్ షాడో జనరేటర్

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

box-shadow జనరేటర్ పూర్తిగా క్లయింట్-సైడ్ React టూల్ — సర్వర్ లేదు, లైబ్రరీ లేదు. ఇది stateలో షాడో లేయర్ ఆబ్జెక్ట్‌ల జాబితాను నిర్వహిస్తుంది, చేతితో రాసిన rgba() ఫార్మాటర్ ఉపయోగించి ప్రతి మార్పుపై చెల్లుబాటయ్యే CSS box-shadow స్ట్రింగ్‌లను కూర్చుతుంది, React style prop ద్వారా వాటిని నేరుగా ప్రివ్యూ ఎలిమెంట్‌కు వర్తింపజేస్తుంది, కాబట్టి బ్రౌజర్ సొంత రెండరింగ్ ఇంజిన్ ఫలితాన్ని వెంటనే గీస్తుంది.

1. 1
   లేయర్ పారామితులు ఫార్మాటర్‌కు అందుతాయి

   ప్రతి షాడో లేయర్ x/y ఆఫ్‌సెట్‌లు, blur, spread, hex రంగు మరియు అపారదర్శకత విలువను నిల్వ చేస్తుంది. ప్రతి మార్పుపై, చిన్న shadowToCss ఫంక్షన్ regexతో hex రంగును RGB భాగాలుగా మార్చి, rgba() స్ట్రింగ్‌ను కూర్చుతుంది — ఉదాహరణకు, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). బహుళ లేయర్‌లు కామాలతో కలుపబడతాయి.
2. 2
   బ్రౌజర్ లైవ్ ప్రివ్యూను గీస్తుంది

   కూర్చిన స్ట్రింగ్ JSXలో నేరుగా div ఎలిమెంట్ యొక్క boxShadow స్టైల్ ప్రాపర్టీకి కేటాయించబడుతుంది. React DOM అట్రిబ్యూట్‌ను అప్‌డేట్ చేస్తుంది, బ్రౌజర్ CSS ఇంజిన్ వెంటనే షాడోను గీస్తుంది — canvas లేదా WebGL లేదు, కేవలం స్థానిక CSS రెండరింగ్.
3. 3
   లాగి-స్థానం మార్చడం Pointer Events API ఉపయోగిస్తుంది

   ప్రివ్యూ బాక్స్‌ను క్లిక్ చేసి లాగితే ఎలిమెంట్‌పై setPointerCapture పిలవబడుతుంది, తర్వాత యాక్టివ్ లేయర్ x మరియు y ఆఫ్‌సెట్‌లను రియల్ టైమ్‌లో అప్‌డేట్ చేయడానికి onPointerMove తేడాలను ట్రాక్ చేస్తుంది. Shift పట్టుకుంటే సూక్ష్మ స్థానం కోసం 0.25x స్కేల్ ఫ్యాక్టర్ వర్తిస్తుంది.
4. 4
   అవుట్‌పుట్ క్లిప్‌బోర్డ్‌కు కాపీ చేయబడుతుంది

   టూల్ అదే లేయర్ డేటా నుండి రెండు అవుట్‌పుట్ ఫార్మాట్‌లు ఇస్తుంది: ప్రామాణిక CSS box-shadow డిక్లరేషన్, మరియు Tailwind సింటాక్స్ నియమాల ప్రకారం ఖాళీలు అండర్‌స్కోర్‌లతో భర్తీ చేయబడిన Tailwind arbitrary-value క్లాస్ (shadow-[...]). ఒక్క-క్లిక్ కాపీ navigator.clipboard.writeText ఉపయోగిస్తుంది.

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