Preview

Gegenereerde CSS

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

Regelaars voor gradiënten

135°
0%
100%

Populaire voorinstellingen

Voorbeelden van gradiënten

Verken deze verbluffende voorbeelden van gradiënten en laat je inspireren voor je volgende project. Klik op een gradiënt om deze in de generator te laden.

Zonsondergang Blush

Een warm verloop geïnspireerd op prachtige zonsondergangen.

Oceaan bries

Een rustige helling die het gevoel van kustwateren oproept.

Munt Fusie

Een fris en modern gradiënt dat mint en hemelsblauw combineert.

Weelderige tuin

Een levendig verloop dat de schoonheid van de natuur vertegenwoordigt.

Kosmische droom

Een magisch verloop geïnspireerd op de nachtelijke hemel.

Gouden uur

Een warm verloop dat de essentie van de schemering vastlegt.

Documentatie over gradiënten

Wat zijn CSS-verlopen?

Met CSS-verlopen kunt u vloeiende overgangen tussen twee of meer kleuren weergeven. Ze kunnen worden gebruikt als achtergrond voor elementen en zijn er in drie verschillende soorten:

  • Lineaire gradiënten:Overgangskleuren langs een rechte lijn.
  • Radiale gradiënten:Wissel kleuren van een middelpunt naar buiten.
  • Conische gradiënten:Overgangskleuren rond een middelpunt in een cirkel.

Verlopen gebruiken

Zodra je een gradiënt hebt gegenereerd met behulp van onze tool, kun je de CSS-code gebruiken in je projecten:

  1. Kopieer de CSS-code van de generator.
  2. Plak het in uw CSS-bestand of gebruik het inline in uw HTML-elementen.
  3. Pas het verloop toe op elk element met behulp van debackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Gebruik meer dan twee kleuren voor een complexer verloopeffect.
  • Pas de kleurposities aan om te bepalen waar overgangen plaatsvinden.
  • Combineer meerdere verlopen voor nog meer creatieve effecten.
  • Voor kegelvormige gradiënten creëert het veranderen van het centrum interessante patronen.
  • Sla uw favoriete verlopen op voor later gebruik.

Browser ondersteuning

CSS-verlopen worden breed ondersteund in moderne browsers. Oudere browsers zoals Internet Explorer geven ze echter mogelijk niet correct weer. Zorg altijd voor een terugvalkleur:

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

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Over deze tool

Onze CSS Gradient Generator is ontworpen om ontwikkelaars en ontwerpers te helpen moeiteloos prachtige verlopen te maken. Of je nu aan een website of applicatie werkt of gewoon met kleuren wilt experimenteren, deze tool maakt het gemakkelijk om het perfecte verloop voor je project te genereren.

Features

Makkelijk te gebruiken

Intuïtieve interface voor het maken van verlopen.

Responsief ontwerp

Werkt perfect op alle schermformaten.

Klaar voor kopiëren en plakken

Krijg direct een schone CSS-code.

Presets beschikbaar

Begin met mooie, vooraf gedefinieerde verlopen.

Related Tools

CSS3 Overgang Generator

Vloeiende overgang van dekking

Minder naar CSS Converter

Transformeer uw Less-code in CSS. Snel, gemakkelijk en veilig.

Sass naar CSS Converter

Transformeer uw Sass-code in CSS. Snel, gemakkelijk en veilig.

Decimaal van tekst

Converteer decimale weergave moeiteloos naar tekst

Snelheid eenheid converter

Converteer met precisie tussen verschillende snelheidseenheden voor uw technische, wetenschappelijke en dagelijkse behoeften

CRC-32 Hasj-calculator

Genereer snel en eenvoudig CRC-32 checksums