Generatore di gradienti CSS
Crea gradienti CSS lineari e radiali. Scelga i colori in modo visivo e copi il CSS generato.
background: linear-gradient(135deg, #535beb, #7c3aed);
Come usare questo strumento
- 1
Click the Color 1 swatch and choose your starting color from the native color picker.
- 2
Click the Color 2 swatch and choose the color the gradient fades into.
- 3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
- 4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.
Che cos'è il generatore di gradienti CSS?
I gradienti CSS sono transizioni di colore tra due o più colori. I gradienti lineari fluiscono in una direzione; quelli radiali si irradiano da un punto. Questo generatore copre i casi comuni; per gradienti complessi a più stop con posizioni personalizzate, li crei manualmente.
Casi d'uso comuni
Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.
Domande frequenti
I gradienti sono efficienti?▼
Posso animare i gradienti?▼
Strumenti correlati
Convertitore di colori (HEX/RGB/HSL)
Converte i colori tra i formati HEX, RGB e HSL. Scelga un colore visivamente o inserisca i valori manualmente.
Generatore di box shadow CSS
Crea valori di box-shadow in CSS in modo visivo. Anteprima in tempo reale e copia del CSS generato.
Generatore di curve di accelerazione cubic-bezier
Crea curve di accelerazione cubic-bezier per il CSS. Include preset standard.
Generatore di palette di colori
Genera palette di colori armoniose a partire da qualsiasi colore di base. Supporta schemi complementari, analoghi, triadici e monocromatici.
Generatore di border radius CSS
Crea valori complessi di border-radius in CSS in modo visivo. Controllo indipendente di ciascun angolo.
Generatore di CSS clamp()
Genera valori CSS fluidi e responsivi con clamp(). Scala in modo uniforme tra dimensioni minime e massime lungo gli intervalli del viewport.