Preview

జనరేట్ చేయబడ్డ CSS

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

గ్రేడియంట్ నియంత్రణలు

135°
0%
100%

పాపులర్ ప్రీసెట్ లు

గ్రేడియంట్ ఉదాహరణలు

ఈ అద్భుతమైన గ్రేడియంట్ ఉదాహరణలను అన్వేషించండి మరియు మీ తదుపరి ప్రాజెక్ట్ కోసం ప్రేరణ పొందండి. జనరేటర్ లోకి లోడ్ చేయడం కొరకు ఏదైనా గ్రేడియంట్ మీద క్లిక్ చేయండి.

సన్ సెట్ బ్లష్

అందమైన సూర్యాస్తమయం నుండి ప్రేరణ పొందిన వెచ్చని గ్రేడియంట్.

సముద్రపు గాలులు

తీర జలాల అనుభూతిని రేకెత్తించే ప్రశాంతమైన గ్రేడియంట్.

పుదీనా ఫ్యూజన్

పుదీనా మరియు స్కై బ్లూ కలయికతో తాజా మరియు ఆధునిక గ్రేడియంట్.

పచ్చని ఉద్యానవనం

ప్రకృతి సౌందర్యానికి ప్రతీకగా నిలిచే శక్తివంతమైన గ్రేడియంట్.

విశ్వ కల

రాత్రి ఆకాశం నుండి ప్రేరణ పొందిన ఒక మాయా గ్రేడియంట్.

గోల్డెన్ అవర్

సంధ్యాకాలం యొక్క సారాన్ని బంధించే వెచ్చని గ్రేడియంట్.

గ్రేడియంట్ డాక్యుమెంటేషన్

సిఎస్ఎస్ గ్రేడియెంట్స్ అంటే ఏమిటి?

CSS గ్రేడియెంట్ లు రెండు లేదా అంతకంటే ఎక్కువ రంగుల మధ్య సున్నితమైన పరివర్తనలను ప్రదర్శించడానికి మిమ్మల్ని అనుమతిస్తాయి. వాటిని మూలకాల నేపథ్యాలుగా ఉపయోగించవచ్చు మరియు మూడు విభిన్న రకాలుగా వస్తాయి:

  • లీనియర్ గ్రేడియెంట్స్:సరళరేఖ వెంబడి రంగులను మార్చండి.
  • రేడియల్ గ్రేడియెంట్స్:రంగులను ఒక కేంద్ర బిందువు నుండి వెలుపలికి మార్చండి.
  • కోనిక్ గ్రేడియెంట్స్:వృత్తంలో కేంద్ర బిందువు చుట్టూ పరివర్తన రంగులు.

గ్రేడియంట్లను ఎలా ఉపయోగించాలి

మీరు మా టూల్ ఉపయోగించి గ్రేడియంట్ జనరేట్ చేసిన తర్వాత, మీరు మీ ప్రాజెక్ట్ ల్లో CSS కోడ్ ని ఉపయోగించవచ్చు:

  1. జనరేటర్ నుంచి CSS కోడ్ కాపీ చేయండి.
  2. దానిని మీ CSS ఫైల్ లో అతికించండి, లేదా మీ HTML ఎలిమెంట్స్ లో ఇన్ లైన్ లో ఉపయోగించండి.
  3. గ్రేడియంట్ ని ఉపయోగించి ఏదైనా ఎలిమెంట్ కు వర్తించండి.background property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • మరింత సంక్లిష్టమైన గ్రేడియంట్ ఎఫెక్ట్ కోసం రెండు కంటే ఎక్కువ రంగులను ఉపయోగించండి.
  • పరివర్తనలు ఎక్కడ సంభవిస్తాయో నియంత్రించడానికి రంగు స్థానాలను సర్దుబాటు చేయండి.
  • మరింత సృజనాత్మక ప్రభావాల కోసం బహుళ గ్రేడియెంట్లను కలపండి.
  • కోనిక్ గ్రేడియెంట్ల కోసం, కేంద్రాన్ని మార్చడం ఆసక్తికరమైన నమూనాలను సృష్టిస్తుంది.
  • తరువాత ఉపయోగం కోసం మీకు ఇష్టమైన గ్రేడియెంట్లను సేవ్ చేయండి.

బ్రౌజర్ మద్దతు

ఆధునిక బ్రౌజర్లలో సిఎస్ఎస్ గ్రేడియంట్లు విస్తృతంగా మద్దతు ఇవ్వబడతాయి. అయితే, ఇంటర్నెట్ ఎక్స్ ప్లోరర్ వంటి పాత బ్రౌజర్లు వాటిని సరిగ్గా అందించకపోవచ్చు. ఎల్లప్పుడూ ఫాల్ బ్యాక్ రంగును అందించండి:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

ఈ టూల్ గురించి

మా CSS గ్రేడియంట్ జనరేటర్ డెవలపర్లు మరియు డిజైనర్లకు అప్రయత్నంగా అందమైన గ్రేడియంట్ లను సృష్టించడంలో సహాయపడటానికి రూపొందించబడింది. మీరు వెబ్సైట్, అనువర్తనంలో పనిచేస్తున్నా లేదా రంగులతో ప్రయోగాలు చేయాలనుకుంటే, ఈ సాధనం మీ ప్రాజెక్ట్ కోసం ఖచ్చితమైన గ్రేడియంట్ను సృష్టించడం సులభం చేస్తుంది.

Features

ఉపయోగించడం సులభం

గ్రేడియెంట్ లను సృష్టించడానికి అంతర్లీన ఇంటర్ ఫేస్.

Responsive Design

అన్ని స్క్రీన్ సైజుల్లో పర్ఫెక్ట్ గా పనిచేస్తుంది.

కాపీ పేస్ట్ రెడీ

తక్షణమే క్లీన్ సీఎస్ఎస్ కోడ్ పొందండి.

ప్రీసెట్ లు లభ్యం

అందమైన ముందస్తుగా నిర్వచించబడిన గ్రేడియెంట్లతో ప్రారంభించండి.

Related Tools