Composants

gradient

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 38

Chargement de l’index de recherche complet.

Aurora veil

1526Aurora veilArrière-plansUn arrière-plan à fond perdu composé de trois rubans de lumière flottants qui s'additionnent là où ils se croisent, sur un fond sombre, avec un calque de légende qui reste lisible.

Aurora curtain

1666Aurora curtainArrière-plansUn doux rideau de lumière suspendu au bord supérieur, son ourlet inférieur montant et descendant sur une lente onde sonore tandis que sa couleur change sur toute la largeur.

Drifting gradient wash

1687Drifting gradient washArrière-plansUn panneau dégradé bicolore surdimensionné au-delà de son cadre et se déplaçant lentement d'avant en arrière, de sorte que la limite de couleur dérive pour toujours sur la surface.

Drifting Light Beams

1688Drifting Light BeamsArrière-plansDe hautes barres de lumière inclinées dérivent vers le haut à différentes vitesses et se confondent pour former une brume qui se déplace lentement.

Gradient slat spotlight

1700Gradient slat spotlightArrière-plansLes lattes verticales cachent un dégradé de couleurs jusqu'à ce qu'un projecteur doux suive le pointeur sur elles et éclaire chaque latte qu'il touche.

Grain wash

1701Grain washArrière-plansDeux pools de couleurs se fondent l'un dans l'autre à travers le cadre tandis qu'une lente déformation maintient leur bordure en mouvement, le tout sous un grain de film épais.

Light column beam

1716Light column beamArrière-plansUne seule colonne de lumière se dresse dans un cadre sombre, respirant en largeur tandis que sa texture intérieure défile vers le haut à travers un dégradé de deux couleurs.

Pointer angle sweep

1732Pointer angle sweepArrière-plansUn panneau éclairé par un balayage conique dont l'origine se trouve sous le pointeur et dont le bord brillant pointe vers lui, passant à une lente rotation au ralenti lorsque le pointeur s'en va.

Pointer ripple mesh

1734Pointer ripple meshArrière-plansUne plaque de couleur est échantillonnée à travers un maillage grossier dont les cellules se souviennent de l'endroit où se trouvait le pointeur, donc le fait de faire glisser l'image s'étale et le frottis se détend.

Shifting gradient pill

1745Shifting gradient pillBoutonsUn bouton capsule peint avec une rampe diagonale surdimensionnée qui glisse sur le visage lorsqu'il est engagé, tandis que deux lueurs de coin alternent entre une teinte claire et une teinte profonde de la même teinte.

Sliding Pin Swap

1747Sliding Pin SwapBoutonsUn bouton en rampe dont le glyphe d'épingle glisse d'un côté à l'autre tandis que le mot restant disparaît et qu'une réponse apparaît derrière lui.

Smoke veil drift

1748Smoke veil driftArrière-plansDe larges nappes de brume colorée traversent un champ noir en biais, s'amincissant et s'épaississant à mesure qu'elles glissent les unes sur les autres.

Color blend compare

1766Color blend compareAnimationDeux échantillons bouclent entre la même paire de couleurs, l'un mélangé avec des valeurs de canal brutes et l'autre avec une lumière linéaire, montrant le creux provoqué par une transition simple.

Glow halo button

1828Glow halo buttonBoutonsUn bouton de pilule avec une copie de lui-même flou derrière lui, donc en vol stationnaire fleurit un halo de couleur douce tandis que le remplissage dérive lentement.

Drifting Gradient Button

1851Drifting Gradient ButtonBoutonsUn bouton dont le remplissage bicolore en diagonale est surdimensionné et ne cesse de glisser, courant plus vite au survol et écrasant au clic.

Gradient Area Chart

1860Gradient Area ChartGraphiquesDeux séries mensuelles empilées dessinées sous forme de zones lisses dont les remplissages s'estompent d'une teinte forte au bord supérieur jusqu'à presque clair à la ligne de base.

Gradient swap button

1862Gradient swap buttonBoutonsUn bouton arrondi dont l'ombrage diagonal échange ses deux arrêts au survol, de sorte que le coin lumineux traverse le visage.

Sheen sweep card

1886Sheen sweep cardCartesUne carte avec une bande de lumière garée sur un coin qui traverse le visage en survol et glisse vers l'arrière au moment où le pointeur part.

Stacked blur fade

1891Stacked blur fadeDéfilementUn bord de panneau de défilement qui se dissout dans la couleur du panneau à travers plusieurs flous d'arrière-plan empilés au lieu d'une bande de flou plate.

Brightening gradient button

1926Brightening gradient buttonBoutonsUne puce bicolore profonde dont le lavage vertical grimpe vers une paire beaucoup plus lumineuse de la même famille en survol, avec un reflet en verre fixe le long de son bord supérieur.

Flow Area Chart

1961Flow Area ChartGraphiquesUn graphique en aires de séries chronologiques avec un remplissage dégradé qui se dessine au chargement et affiche un réticule avec une info-bulle de valeur au survol.

Flowing gradient headline

1962Flowing gradient headlineEffets de texteUn titre dont les lettres sont remplies par un dégradé bicolore mobile, de sorte qu'une bande lumineuse dérive sans fin à travers les mots, avec une douce floraison facultative derrière.

Gradient shift text

1970Gradient shift textEffets de texteUne pilule arrondie dont le texte est rempli d'un dégradé bicolore qui balaie continuellement les lettres.

Gradient sweep heading

1971Gradient sweep headingEffets de texteUn grand titre dont le remplissage est une bande de dégradé mobile qui s'étend continuellement d'un bord à l'autre, donnant au texte un éclat brillant et toujours changeant.

Charge Up Action Button

2314Charge Up Action ButtonBoutonsUne pilule de charbon de bois qui s'éclaire en un dégradé saturé en survol, se soulevant de la surface tandis que sa marque tourne et s'éclaircit.

Speckled gradient button

2434Speckled gradient buttonBoutonsUne face dégradée à deux arrêts recouverte d'un bruit fractal généré dans un mélange doux, de sorte que la couleur se lit comme celle imprimée sur du papier brut.

Gradient tilt pill

2474Gradient tilt pillBoutonsUne pilule entièrement arrondie dont le remplissage dégradé bicolore oscille son angle en survol et pointe plus sombre vers l'ombre lorsqu'on appuie dessus.

Panning gradient button

2483Panning gradient buttonBoutonsUne clé en forme de dôme dont le dégradé diagonal surdimensionné traverse le visage au survol, balayant une bande plus claire d'un coin à l'autre.

Settling shadow button

2592Settling shadow buttonBoutonsUne pilule à dégradé chaud qui flotte au-dessus d'une grande ombre teintée d'accent et atterrit en survol lorsque l'ombre disparaît.

Rim to fill gradient button

2635Rim to fill gradient buttonBoutonsUn bouton sombre affiche uniquement un mince bord dégradé au repos ; le survol laisse tomber le panneau intérieur de sorte que le dégradé inonde tout le visage et une pression le presse.

Frame draw button

2646Frame draw buttonBoutonsUn bouton rempli qui se vide en survol tandis que quatre fines barres sortent des coins opposés pour dessiner un cadre complet, puis tout revient en congé.

Overhead light pill

2650Overhead light pillBoutonsUn bouton de pilule sombre éclairé par un doux bassin de lumière au plafond, qui s'assombrit dans son ensemble en survol et éclaircit son épais anneau extérieur lors de la mise au point.

Flat to flow button

2661Flat to flow buttonBoutonsUn bouton plat et solide qui se transforme en une large bande bicolore défilant sans fin sur son visage en survol ou en mise au point.

Amber upload pill

2707Amber upload pillBoutonsUne pilule de téléchargement en dégradé chaud avec un bord brillant qui élargit sa dominante colorée et éclaire l'étiquette par derrière en survol.

Flowing gradient text

2814Flowing gradient textEffets de texteUn dégradé multicolore balaie en continu le remplissage d'un titre, éventuellement encadré par une bordure de dégradé assortie.

Sweeping shine text

2822Sweeping shine textEffets de texteTexte rempli d'un dégradé atténué et d'une bande diagonale lumineuse qui se déplace d'avant en arrière comme un reflet de lumière et peut se figer en survol.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Amber upload pill
Une pilule de téléchargement en dégradé chaud avec un bord brillant qui élargit sa dominante colorée et éclaire l'étiquette par derrière en survol.
Aurora curtain
Un doux rideau de lumière suspendu au bord supérieur, son ourlet inférieur montant et descendant sur une lente onde sonore tandis que sa couleur change sur toute la largeur.
Aurora veil
Un arrière-plan à fond perdu composé de trois rubans de lumière flottants qui s'additionnent là où ils se croisent, sur un fond sombre, avec un calque de légende qui reste lisible.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)