[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"topic:css-gradients-linear-radial-conic":6,"course-tree":149,"blog-categories":557},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},{"id":8,"title":9,"slug":10,"content":11,"course":12,"subcategory":15,"author":18,"reading_time_minutes":24,"cornerstone":25,"schema_type":26,"faq_json":5,"video_url":5,"canonical_url":27,"meta_title":28,"meta_description":29,"og_image":5,"toc_json":30,"code_examples":101,"quiz":119,"exercises":124,"published_at":5,"updated_at":140,"prev":141,"next":145},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic","\u003Ch2 id=\"what-are-css-gradients\">What Are CSS Gradients?\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS gradients\u003C\u002Fstrong> are images generated by the browser that smoothly transition between two or more colors. They are used in \u003Ccode>background-image\u003C\u002Fcode> (and other places that accept an image), need no file download, and scale perfectly. Our focus keyword is \u003Cstrong>CSS gradients\u003C\u002Fstrong>, and this lesson covers \u003Cstrong>linear-gradient\u003C\u002Fstrong>, \u003Cstrong>radial-gradient\u003C\u002Fstrong> and \u003Cstrong>conic-gradient\u003C\u002Fstrong>, plus trending topics such as CSS gradient text, gradient borders, repeating gradients, CSS pie charts, mesh-style gradients, and interpolating in OKLCH for smoother colors.\u003C\u002Fp>\u003Ch2 id=\"1-linear-gradient\">1. linear-gradient()\u003C\u002Fh2>\u003Cp>A linear gradient moves along a straight line. Syntax: \u003Ccode>linear-gradient(direction, color-stop, color-stop, ...)\u003C\u002Fcode>.\u003C\u002Fp>\u003Cul>\u003Cli>Default direction is \u003Ccode>to bottom\u003C\u002Fcode> (top to bottom).\u003C\u002Fli>\u003Cli>Use keywords: \u003Ccode>to right\u003C\u002Fcode>, \u003Ccode>to bottom right\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Or angles: \u003Ccode>45deg\u003C\u002Fcode>, \u003Ccode>90deg\u003C\u002Fcode> (to right), \u003Ccode>180deg\u003C\u002Fcode> (to bottom), \u003Ccode>0deg\u003C\u002Fcode> (to top).\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode>background: linear-gradient(to right, #22c55e, #3b82f6);\nbackground: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"2-color-stops-and-hints\">2. Color Stops and Hints\u003C\u002Fh2>\u003Cul>\u003Cli>A color stop has a color and an optional position: \u003Ccode>red 20%\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Two stops at the same position make a hard edge (no blending): \u003Ccode>red 50%, blue 50%\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Two positions on one color: \u003Ccode>red 20% 40%\u003C\u002Fcode> makes a solid band.\u003C\u002Fli>\u003Cli>A \u003Cstrong>color hint\u003C\u002Fstrong> is a lone percentage between stops (\u003Ccode>red, 30%, blue\u003C\u002Fcode>) that moves the midpoint of the transition.\u003C\u002Fli>\u003Cli>Use \u003Ccode>transparent\u003C\u002Fcode> for fades. Modern browsers handle transparent correctly, blending in premultiplied alpha.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-radial-gradient\">3. radial-gradient()\u003C\u002Fh2>\u003Cp>A radial gradient radiates from a center point. Syntax: \u003Ccode>radial-gradient(shape size at position, stops)\u003C\u002Fcode>.\u003C\u002Fp>\u003Cul>\u003Cli>Shape: \u003Ccode>circle\u003C\u002Fcode> or \u003Ccode>ellipse\u003C\u002Fcode> (default).\u003C\u002Fli>\u003Cli>Size: \u003Ccode>closest-side\u003C\u002Fcode>, \u003Ccode>farthest-corner\u003C\u002Fcode> (default), \u003Ccode>closest-corner\u003C\u002Fcode>, \u003Ccode>farthest-side\u003C\u002Fcode>, or explicit lengths.\u003C\u002Fli>\u003Cli>Position: \u003Ccode>at center\u003C\u002Fcode>, \u003Ccode>at top left\u003C\u002Fcode>, \u003Ccode>at 30% 70%\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode>background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #b45309);\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"4-conic-gradient\">4. conic-gradient()\u003C\u002Fh2>\u003Cp>A conic gradient rotates colors around a center point, like a color wheel or the sweep of a radar. Syntax: \u003Ccode>conic-gradient(from angle at position, stops)\u003C\u002Fcode>. Stops use angles or percentages of a full circle.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Pie charts:\u003C\u002Fstrong> hard stops such as \u003Ccode>#3b82f6 0 40%, #f59e0b 0 70%, #22c55e 0\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Color wheels:\u003C\u002Fstrong> \u003Ccode>conic-gradient(red, yellow, lime, aqua, blue, magenta, red)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Checkerboards:\u003C\u002Fstrong> \u003Ccode>repeating-conic-gradient\u003C\u002Fcode> with a small background-size.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"5-repeating-gradients\">5. Repeating Gradients\u003C\u002Fh2>\u003Cp>Use \u003Ccode>repeating-linear-gradient()\u003C\u002Fcode>, \u003Ccode>repeating-radial-gradient()\u003C\u002Fcode> and \u003Ccode>repeating-conic-gradient()\u003C\u002Fcode> to tile the color stops. They are ideal for stripes, rings and loading indicators.\u003C\u002Fp>\u003Ch2 id=\"6-interpolation-color-space\">6. Interpolation Color Space\u003C\u002Fh2>\u003Cp>By default gradients blend in sRGB, which can look gray or muddy in the middle (for example blue to yellow). You can choose the color space: \u003Ccode>linear-gradient(in oklch, #2563eb, #facc15)\u003C\u002Fcode> or \u003Ccode>in oklab\u003C\u002Fcode>. Add hue interpolation like \u003Ccode>in oklch longer hue\u003C\u002Fcode> for rainbow effects. This is a trending technique for vibrant, smooth gradients.\u003C\u002Fp>\u003Ch2 id=\"7-popular-gradient-techniques\">7. Popular Gradient Techniques\u003C\u002Fh2>\u003Ch3 id=\"gradient-text\">Gradient text\u003C\u002Fh3>\u003Cp>Use a gradient background with \u003Ccode>background-clip: text\u003C\u002Fcode> and a transparent text color.\u003C\u002Fp>\u003Ch3 id=\"gradient-borders\">Gradient borders\u003C\u002Fh3>\u003Cp>Layer two backgrounds: a solid fill clipped to \u003Ccode>padding-box\u003C\u002Fcode> and a gradient clipped to \u003Ccode>border-box\u003C\u002Fcode>, with a transparent border. Or use \u003Ccode>border-image\u003C\u002Fcode> (which does not work with rounded corners).\u003C\u002Fp>\u003Ch3 id=\"overlays-for-text-readability\">Overlays for text readability\u003C\u002Fh3>\u003Cp>\u003Ccode>linear-gradient(to top, rgb(0 0 0 \u002F 70%), transparent)\u003C\u002Fcode> over a photo.\u003C\u002Fp>\u003Ch3 id=\"mesh-like-backgrounds\">Mesh-like backgrounds\u003C\u002Fh3>\u003Cp>Stack several \u003Ccode>radial-gradient()\u003C\u002Fcode> layers with transparent ends over a base color for a soft, modern look.\u003C\u002Fp>\u003Ch3 id=\"skeleton-loaders\">Skeleton loaders\u003C\u002Fh3>\u003Cp>Animate \u003Ccode>background-position\u003C\u002Fcode> of a wide linear gradient to create a shimmer effect.\u003C\u002Fp>\u003Ch2 id=\"8-performance-and-accessibility\">8. Performance and Accessibility\u003C\u002Fh2>\u003Cul>\u003Cli>Gradients are cheap to render, but very large animated gradients can cost repaint time. Animate \u003Ccode>transform\u003C\u002Fcode> or \u003Ccode>background-position\u003C\u002Fcode> rather than changing the stops.\u003C\u002Fli>\u003Cli>Check text contrast against the lightest and darkest parts of the gradient.\u003C\u002Fli>\u003Cli>Provide a solid \u003Ccode>background-color\u003C\u002Fcode> fallback for old browsers.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Use two to three colors for clean gradients. More stops need more care.\u003C\u002Fli>\u003Cli>Use OKLCH interpolation to avoid dull midpoints.\u003C\u002Fli>\u003Cli>Store gradients in custom properties: \u003Ccode>--grad: linear-gradient(...)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Use hard stops for charts and stripes, soft stops for backgrounds.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting that \u003Ccode>0deg\u003C\u002Fcode> points up, not right.\u003C\u002Fli>\u003Cli>Using gradients with \u003Ccode>background-color\u003C\u002Fcode> only and expecting \u003Ccode>background-color: linear-gradient()\u003C\u002Fcode> to work. Gradients belong in \u003Ccode>background-image\u003C\u002Fcode> or the \u003Ccode>background\u003C\u002Fcode> shorthand.\u003C\u002Fli>\u003Cli>Placing a color hint next to another hint, which is invalid.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>border-image\u003C\u002Fcode> with a gradient to follow \u003Ccode>border-radius\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Linear gradients follow a line, radial gradients spread from a point and conic gradients sweep around a point. Add repeating variants, hard stops and OKLCH interpolation and you can build backgrounds, charts, patterns and loaders with pure CSS. Practice with the live examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .g { display: inline-block; width: 150px; height: 90px; margin: 4px; color: #fff; font: 12px sans-serif; padding: 6px; border-radius: 8px; }\n  .g1 { background: linear-gradient(#22c55e, #3b82f6); }\n  .g2 { background: linear-gradient(to right, #f59e0b, #ef4444); }\n  .g3 { background: linear-gradient(45deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%); }\n  .g4 { background: linear-gradient(90deg, #0ea5e9 50%, #f97316 50%); }\n<\u002Fstyle>\n<div class='g g1'>default (to bottom)<\u002Fdiv>\n<div class='g g2'>to right<\u002Fdiv>\n<div class='g g3'>45deg, 3 stops<\u002Fdiv>\n<div class='g g4'>hard stop at 50%<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .r { display: inline-block; width: 150px; height: 150px; margin: 4px; }\n  .r1 { background: radial-gradient(circle, #fde047, #f97316); }\n  .r2 { background: radial-gradient(circle at 30% 30%, #fff, #38bdf8 40%, #1e3a8a); border-radius: 50%; }\n  .r3 { background: radial-gradient(closest-side, #a78bfa, #4c1d95); }\n  .r4 { background: repeating-radial-gradient(circle, #0f172a 0 8px, #38bdf8 8px 16px); }\n<\u002Fstyle>\n<div class='r r1'><\u002Fdiv><div class='r r2'><\u002Fdiv><div class='r r3'><\u002Fdiv><div class='r r4'><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .c { display: inline-block; width: 160px; height: 160px; margin: 6px; border-radius: 50%; }\n  .pie { background: conic-gradient(#3b82f6 0 40%, #f59e0b 0 70%, #22c55e 0); }\n  .wheel { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }\n  .donut { background: conic-gradient(#ef4444 0 65%, #e2e8f0 0); -webkit-mask: radial-gradient(circle, transparent 50%, #000 51%); mask: radial-gradient(circle, transparent 50%, #000 51%); }\n<\u002Fstyle>\n<div class='c pie'><\u002Fdiv><div class='c wheel'><\u002Fdiv><div class='c donut'><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .row { height: 60px; border-radius: 8px; margin-bottom: 10px; color: #fff; font: 13px sans-serif; padding: 8px; }\n  .srgb { background: linear-gradient(90deg, #2563eb, #facc15); }\n  .ok { background: linear-gradient(in oklch 90deg, #2563eb, #facc15); }\n  .rainbow { background: linear-gradient(in oklch longer hue 90deg, #ef4444, #ef4444); }\n  .stripe { background: repeating-linear-gradient(-45deg, #1e293b 0 10px, #334155 10px 20px); }\n<\u002Fstyle>\n<div class='row srgb'>Default sRGB blend (muddy middle)<\u002Fdiv>\n<div class='row ok'>In OKLCH (vibrant middle)<\u002Fdiv>\n<div class='row rainbow'>in oklch longer hue (rainbow)<\u002Fdiv>\n<div class='row stripe'>repeating stripes<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .gborder { max-width: 320px; padding: 20px; border: 4px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4) border-box; margin-bottom: 16px; }\n  .gtext { font: 800 40px sans-serif; background: linear-gradient(90deg, #f97316, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 16px; }\n  .mesh { height: 140px; border-radius: 12px; background: radial-gradient(at 20% 20%, #f472b6, transparent 50%), radial-gradient(at 80% 30%, #38bdf8, transparent 50%), radial-gradient(at 50% 90%, #a3e635, transparent 50%), #1e1b4b; }\n<\u002Fstyle>\n<div class='gborder'>Gradient border with rounded corners<\u002Fdiv>\n<h1 class='gtext'>Gradient Text<\u002Fh1>\n<div class='mesh'><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":13,"slug":14},"CSS","css",{"name":16,"slug":17},"Colors, Backgrounds & Effects","colors-backgrounds-effects",{"slug":19,"display_name":20,"job_title":5,"short_bio":5,"expertise_tags":21,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":22,"posts":23},"badar-khalil","Badar Khalil",[],[],[],5,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-gradients-linear-radial-conic","CSS Gradients: Linear, Radial & Conic Guide","Learn CSS gradients: linear-gradient, radial-gradient, conic-gradient, repeating gradients, color stops, oklch interpolation and examples.",[31,36,40,44,48,52,56,60,85,89,93,97],{"id":32,"text":33,"level":34,"children":35},"what-are-css-gradients","What Are CSS Gradients?",2,[],{"id":37,"text":38,"level":34,"children":39},"1-linear-gradient","1. linear-gradient()",[],{"id":41,"text":42,"level":34,"children":43},"2-color-stops-and-hints","2. Color Stops and Hints",[],{"id":45,"text":46,"level":34,"children":47},"3-radial-gradient","3. radial-gradient()",[],{"id":49,"text":50,"level":34,"children":51},"4-conic-gradient","4. conic-gradient()",[],{"id":53,"text":54,"level":34,"children":55},"5-repeating-gradients","5. Repeating Gradients",[],{"id":57,"text":58,"level":34,"children":59},"6-interpolation-color-space","6. Interpolation Color Space",[],{"id":61,"text":62,"level":34,"children":63},"7-popular-gradient-techniques","7. Popular Gradient Techniques",[64,69,73,77,81],{"id":65,"text":66,"level":67,"children":68},"gradient-text","Gradient text",3,[],{"id":70,"text":71,"level":67,"children":72},"gradient-borders","Gradient borders",[],{"id":74,"text":75,"level":67,"children":76},"overlays-for-text-readability","Overlays for text readability",[],{"id":78,"text":79,"level":67,"children":80},"mesh-like-backgrounds","Mesh-like backgrounds",[],{"id":82,"text":83,"level":67,"children":84},"skeleton-loaders","Skeleton loaders",[],{"id":86,"text":87,"level":34,"children":88},"8-performance-and-accessibility","8. Performance and Accessibility",[],{"id":90,"text":91,"level":34,"children":92},"best-practices","Best Practices",[],{"id":94,"text":95,"level":34,"children":96},"common-mistakes","Common Mistakes",[],{"id":98,"text":99,"level":34,"children":100},"summary","Summary",[],[102,107,110,113,116],{"id":103,"language":104,"code":105,"is_editable":106},264,"html","\u003Cstyle>\n  .g { display: inline-block; width: 150px; height: 90px; margin: 4px; color: #fff; font: 12px sans-serif; padding: 6px; border-radius: 8px; }\n  .g1 { background: linear-gradient(#22c55e, #3b82f6); }\n  .g2 { background: linear-gradient(to right, #f59e0b, #ef4444); }\n  .g3 { background: linear-gradient(45deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%); }\n  .g4 { background: linear-gradient(90deg, #0ea5e9 50%, #f97316 50%); }\n\u003C\u002Fstyle>\n\u003Cdiv class='g g1'>default (to bottom)\u003C\u002Fdiv>\n\u003Cdiv class='g g2'>to right\u003C\u002Fdiv>\n\u003Cdiv class='g g3'>45deg, 3 stops\u003C\u002Fdiv>\n\u003Cdiv class='g g4'>hard stop at 50%\u003C\u002Fdiv>",true,{"id":108,"language":104,"code":109,"is_editable":106},265,"\u003Cstyle>\n  .r { display: inline-block; width: 150px; height: 150px; margin: 4px; }\n  .r1 { background: radial-gradient(circle, #fde047, #f97316); }\n  .r2 { background: radial-gradient(circle at 30% 30%, #fff, #38bdf8 40%, #1e3a8a); border-radius: 50%; }\n  .r3 { background: radial-gradient(closest-side, #a78bfa, #4c1d95); }\n  .r4 { background: repeating-radial-gradient(circle, #0f172a 0 8px, #38bdf8 8px 16px); }\n\u003C\u002Fstyle>\n\u003Cdiv class='r r1'>\u003C\u002Fdiv>\u003Cdiv class='r r2'>\u003C\u002Fdiv>\u003Cdiv class='r r3'>\u003C\u002Fdiv>\u003Cdiv class='r r4'>\u003C\u002Fdiv>",{"id":111,"language":104,"code":112,"is_editable":106},266,"\u003Cstyle>\n  .c { display: inline-block; width: 160px; height: 160px; margin: 6px; border-radius: 50%; }\n  .pie { background: conic-gradient(#3b82f6 0 40%, #f59e0b 0 70%, #22c55e 0); }\n  .wheel { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }\n  .donut { background: conic-gradient(#ef4444 0 65%, #e2e8f0 0); -webkit-mask: radial-gradient(circle, transparent 50%, #000 51%); mask: radial-gradient(circle, transparent 50%, #000 51%); }\n\u003C\u002Fstyle>\n\u003Cdiv class='c pie'>\u003C\u002Fdiv>\u003Cdiv class='c wheel'>\u003C\u002Fdiv>\u003Cdiv class='c donut'>\u003C\u002Fdiv>",{"id":114,"language":104,"code":115,"is_editable":106},267,"\u003Cstyle>\n  .row { height: 60px; border-radius: 8px; margin-bottom: 10px; color: #fff; font: 13px sans-serif; padding: 8px; }\n  .srgb { background: linear-gradient(90deg, #2563eb, #facc15); }\n  .ok { background: linear-gradient(in oklch 90deg, #2563eb, #facc15); }\n  .rainbow { background: linear-gradient(in oklch longer hue 90deg, #ef4444, #ef4444); }\n  .stripe { background: repeating-linear-gradient(-45deg, #1e293b 0 10px, #334155 10px 20px); }\n\u003C\u002Fstyle>\n\u003Cdiv class='row srgb'>Default sRGB blend (muddy middle)\u003C\u002Fdiv>\n\u003Cdiv class='row ok'>In OKLCH (vibrant middle)\u003C\u002Fdiv>\n\u003Cdiv class='row rainbow'>in oklch longer hue (rainbow)\u003C\u002Fdiv>\n\u003Cdiv class='row stripe'>repeating stripes\u003C\u002Fdiv>",{"id":117,"language":104,"code":118,"is_editable":106},268,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .gborder { max-width: 320px; padding: 20px; border: 4px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4) border-box; margin-bottom: 16px; }\n  .gtext { font: 800 40px sans-serif; background: linear-gradient(90deg, #f97316, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 16px; }\n  .mesh { height: 140px; border-radius: 12px; background: radial-gradient(at 20% 20%, #f472b6, transparent 50%), radial-gradient(at 80% 30%, #38bdf8, transparent 50%), radial-gradient(at 50% 90%, #a3e635, transparent 50%), #1e1b4b; }\n\u003C\u002Fstyle>\n\u003Cdiv class='gborder'>Gradient border with rounded corners\u003C\u002Fdiv>\n\u003Ch1 class='gtext'>Gradient Text\u003C\u002Fh1>\n\u003Cdiv class='mesh'>\u003C\u002Fdiv>",{"id":120,"slug":121,"title":122,"time_limit_seconds":5,"pass_percentage":123,"question_count":24},37,"css-gradients-quiz","CSS Gradients Quiz",70,[125,133],{"id":126,"title":127,"slug":128,"prompt":129,"starter_code":130,"expected_output":131,"language":104,"order_index":132},109,"Build a CSS Pie Chart","css-pie-chart-conic","Using conic-gradient and border-radius: 50%, draw a pie chart 200px wide and tall. Segments: 50% blue (#3b82f6), 30% orange (#f59e0b), 20% green (#22c55e). Use hard stops.","\u003Cstyle>\n  .pie { width: 200px; height: 200px; \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='pie'>\u003C\u002Fdiv>","A circle divided into 50%, 30% and 20% colored segments.",1,{"id":134,"title":135,"slug":136,"prompt":137,"starter_code":138,"expected_output":139,"language":104,"order_index":34},110,"Striped Progress Bar","striped-progress-bar","Make the .bar element look like a striped progress bar using repeating-linear-gradient at 45deg with two shades of green. Keep height 24px and rounded corners.","\u003Cstyle>\n  .bar { height: 24px; width: 300px; \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='bar'>\u003C\u002Fdiv>","A 24px tall bar with diagonal green stripes and rounded corners.","2026-09-29T18:53:27+00:00",{"id":142,"slug":143,"title":144},96,"css-backgrounds","CSS Backgrounds",{"id":146,"slug":147,"title":148},98,"css-borders-outlines-rounded-corners","CSS Borders, Outlines & Rounded Corners",{"data":150},[151,470],{"id":132,"name":152,"slug":153,"icon":5,"icon_url":5,"short_description":154,"meta_title":155,"meta_description":156,"og_image":157,"locale":158,"subcategories":159},"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[160,184,220,244,320,353,367,395,419,435],{"id":132,"name":161,"slug":162,"order_index":132,"topics":163},"HTML Fundamentals & Setup","html-fundamentals-setup",[164,167,170,173,177,180],{"id":34,"title":165,"slug":166,"order_index":132,"cornerstone":25,"reading_time_minutes":34},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":132,"title":168,"slug":169,"order_index":132,"cornerstone":25,"reading_time_minutes":132},"HTML Introduction & History","html-introduction-and-history",{"id":67,"title":171,"slug":172,"order_index":67,"cornerstone":25,"reading_time_minutes":34},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":174,"title":175,"slug":176,"order_index":174,"cornerstone":25,"reading_time_minutes":34},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":24,"title":178,"slug":179,"order_index":24,"cornerstone":25,"reading_time_minutes":34},"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":181,"title":182,"slug":183,"order_index":181,"cornerstone":25,"reading_time_minutes":34},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":34,"name":185,"slug":186,"order_index":34,"topics":187},"Text & Content Basics","text-content-basics",[188,192,196,200,204,208,212,216],{"id":189,"title":190,"slug":191,"order_index":189,"cornerstone":25,"reading_time_minutes":34},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":25,"reading_time_minutes":34},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":25,"reading_time_minutes":132},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":25,"reading_time_minutes":34},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":25,"reading_time_minutes":34},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":209,"title":210,"slug":211,"order_index":209,"cornerstone":25,"reading_time_minutes":34},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":213,"title":214,"slug":215,"order_index":213,"cornerstone":25,"reading_time_minutes":34},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":217,"title":218,"slug":219,"order_index":217,"cornerstone":25,"reading_time_minutes":34},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":67,"name":221,"slug":222,"order_index":67,"topics":223},"Links, Media & Navigation","links-media-navigation",[224,228,232,236,240],{"id":225,"title":226,"slug":227,"order_index":225,"cornerstone":25,"reading_time_minutes":34},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":229,"title":230,"slug":231,"order_index":229,"cornerstone":25,"reading_time_minutes":34},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":233,"title":234,"slug":235,"order_index":233,"cornerstone":25,"reading_time_minutes":132},17,"HTML Favicon Setup","html-favicon-setup",{"id":237,"title":238,"slug":239,"order_index":237,"cornerstone":25,"reading_time_minutes":34},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":241,"title":242,"slug":243,"order_index":241,"cornerstone":25,"reading_time_minutes":34},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":174,"name":245,"slug":246,"order_index":174,"topics":247},"Structuring Content","structuring-content",[248,253,258,263,268,272,276,280,284,288,292,296,300,304,308,312,316],{"id":249,"title":250,"slug":251,"order_index":252,"cornerstone":25,"reading_time_minutes":34},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":254,"title":255,"slug":256,"order_index":257,"cornerstone":25,"reading_time_minutes":34},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":259,"title":260,"slug":261,"order_index":262,"cornerstone":25,"reading_time_minutes":34},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":264,"title":265,"slug":266,"order_index":267,"cornerstone":25,"reading_time_minutes":132},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":269,"title":270,"slug":271,"order_index":249,"cornerstone":25,"reading_time_minutes":34},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":273,"title":274,"slug":275,"order_index":254,"cornerstone":25,"reading_time_minutes":132},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":277,"title":278,"slug":279,"order_index":259,"cornerstone":25,"reading_time_minutes":34},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":281,"title":282,"slug":283,"order_index":264,"cornerstone":25,"reading_time_minutes":34},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":285,"title":286,"slug":287,"order_index":269,"cornerstone":25,"reading_time_minutes":34},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":289,"title":290,"slug":291,"order_index":273,"cornerstone":25,"reading_time_minutes":67},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":293,"title":294,"slug":295,"order_index":277,"cornerstone":25,"reading_time_minutes":34},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":297,"title":298,"slug":299,"order_index":281,"cornerstone":25,"reading_time_minutes":34},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":301,"title":302,"slug":303,"order_index":285,"cornerstone":25,"reading_time_minutes":132},77,"HTML Symbols","html-symbols",{"id":305,"title":306,"slug":307,"order_index":305,"cornerstone":25,"reading_time_minutes":132},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":309,"title":310,"slug":311,"order_index":309,"cornerstone":25,"reading_time_minutes":34},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":313,"title":314,"slug":315,"order_index":313,"cornerstone":25,"reading_time_minutes":132},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":317,"title":318,"slug":319,"order_index":317,"cornerstone":25,"reading_time_minutes":132},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":189,"name":321,"slug":322,"order_index":24,"topics":323},"Forms & User Input","forms-user-input",[324,328,333,338,343,348],{"id":325,"title":326,"slug":327,"order_index":120,"cornerstone":25,"reading_time_minutes":34},49,"HTML Forms Introduction","html-forms-introduction",{"id":329,"title":330,"slug":331,"order_index":332,"cornerstone":25,"reading_time_minutes":132},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":334,"title":335,"slug":336,"order_index":337,"cornerstone":25,"reading_time_minutes":132},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":339,"title":340,"slug":341,"order_index":342,"cornerstone":25,"reading_time_minutes":34},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":344,"title":345,"slug":346,"order_index":347,"cornerstone":25,"reading_time_minutes":34},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":349,"title":350,"slug":351,"order_index":352,"cornerstone":25,"reading_time_minutes":34},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":193,"name":354,"slug":355,"order_index":181,"topics":356},"Graphics & Visuals","graphics-visuals",[357,362],{"id":358,"title":359,"slug":360,"order_index":361,"cornerstone":25,"reading_time_minutes":67},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":363,"title":364,"slug":365,"order_index":366,"cornerstone":25,"reading_time_minutes":67},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":197,"name":368,"slug":369,"order_index":189,"topics":370},"Multimedia","multimedia",[371,376,381,386,391],{"id":372,"title":373,"slug":374,"order_index":375,"cornerstone":25,"reading_time_minutes":34},57,"HTML Media Overview","html-media-overview",45,{"id":377,"title":378,"slug":379,"order_index":380,"cornerstone":25,"reading_time_minutes":34},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":382,"title":383,"slug":384,"order_index":385,"cornerstone":25,"reading_time_minutes":34},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":387,"title":388,"slug":389,"order_index":390,"cornerstone":25,"reading_time_minutes":34},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":392,"title":393,"slug":394,"order_index":325,"cornerstone":25,"reading_time_minutes":34},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":201,"name":396,"slug":397,"order_index":193,"topics":398},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[399,403,407,411,415],{"id":400,"title":401,"slug":402,"order_index":329,"cornerstone":25,"reading_time_minutes":34},62,"HTML Geolocation API","html-geolocation-api",{"id":404,"title":405,"slug":406,"order_index":334,"cornerstone":25,"reading_time_minutes":34},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":408,"title":409,"slug":410,"order_index":339,"cornerstone":25,"reading_time_minutes":34},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":412,"title":413,"slug":414,"order_index":344,"cornerstone":25,"reading_time_minutes":34},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":416,"title":417,"slug":418,"order_index":349,"cornerstone":25,"reading_time_minutes":34},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":205,"name":420,"slug":421,"order_index":197,"topics":422},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[423,427,431],{"id":424,"title":425,"slug":426,"order_index":358,"cornerstone":25,"reading_time_minutes":34},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":428,"title":429,"slug":430,"order_index":363,"cornerstone":25,"reading_time_minutes":34},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":432,"title":433,"slug":434,"order_index":372,"cornerstone":25,"reading_time_minutes":34},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":209,"name":436,"slug":437,"order_index":201,"topics":438},"Reference & Practice","reference-practice",[439,442,446,450,454,458,462,466],{"id":123,"title":440,"slug":441,"order_index":132,"cornerstone":25,"reading_time_minutes":34},"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":443,"title":444,"slug":445,"order_index":34,"cornerstone":25,"reading_time_minutes":34},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":447,"title":448,"slug":449,"order_index":67,"cornerstone":25,"reading_time_minutes":34},72,"HTML Events Reference","html-events-reference",{"id":451,"title":452,"slug":453,"order_index":174,"cornerstone":25,"reading_time_minutes":34},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":455,"title":456,"slug":457,"order_index":24,"cornerstone":25,"reading_time_minutes":34},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":459,"title":460,"slug":461,"order_index":181,"cornerstone":25,"reading_time_minutes":34},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":463,"title":464,"slug":465,"order_index":189,"cornerstone":25,"reading_time_minutes":67},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":467,"title":468,"slug":469,"order_index":193,"cornerstone":25,"reading_time_minutes":132},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":34,"name":13,"slug":14,"icon":5,"icon_url":5,"short_description":471,"meta_title":472,"meta_description":473,"og_image":5,"locale":158,"subcategories":474},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[475,500,521],{"id":213,"name":476,"slug":477,"order_index":478,"topics":479},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[480,484,488,492,496],{"id":481,"title":482,"slug":483,"order_index":132,"cornerstone":25,"reading_time_minutes":174},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":485,"title":486,"slug":487,"order_index":34,"cornerstone":25,"reading_time_minutes":174},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":489,"title":490,"slug":491,"order_index":67,"cornerstone":25,"reading_time_minutes":67},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":493,"title":494,"slug":495,"order_index":174,"cornerstone":25,"reading_time_minutes":67},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":497,"title":498,"slug":499,"order_index":24,"cornerstone":25,"reading_time_minutes":24},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":225,"name":16,"slug":17,"order_index":478,"topics":501},[502,506,507,508,509,513,517],{"id":503,"title":504,"slug":505,"order_index":217,"cornerstone":25,"reading_time_minutes":24},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":142,"title":144,"slug":143,"order_index":225,"cornerstone":25,"reading_time_minutes":174},{"id":8,"title":9,"slug":10,"order_index":229,"cornerstone":25,"reading_time_minutes":24},{"id":146,"title":148,"slug":147,"order_index":233,"cornerstone":25,"reading_time_minutes":24},{"id":510,"title":511,"slug":512,"order_index":237,"cornerstone":25,"reading_time_minutes":181},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":514,"title":515,"slug":516,"order_index":241,"cornerstone":25,"reading_time_minutes":24},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":518,"title":519,"slug":520,"order_index":252,"cornerstone":25,"reading_time_minutes":181},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":217,"name":522,"slug":523,"order_index":478,"topics":524},"Selectors & the Cascade","selectors-the-cascade",[525,529,533,537,541,545,549,553],{"id":526,"title":527,"slug":528,"order_index":181,"cornerstone":25,"reading_time_minutes":174},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":530,"title":531,"slug":532,"order_index":189,"cornerstone":25,"reading_time_minutes":174},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":534,"title":535,"slug":536,"order_index":193,"cornerstone":25,"reading_time_minutes":174},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":538,"title":539,"slug":540,"order_index":197,"cornerstone":25,"reading_time_minutes":181},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":542,"title":543,"slug":544,"order_index":201,"cornerstone":25,"reading_time_minutes":24},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":546,"title":547,"slug":548,"order_index":205,"cornerstone":25,"reading_time_minutes":24},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":550,"title":551,"slug":552,"order_index":209,"cornerstone":25,"reading_time_minutes":174},93,"CSS Specificity Explained","css-specificity-explained",{"id":554,"title":555,"slug":556,"order_index":213,"cornerstone":25,"reading_time_minutes":24},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":558},[559,562,565,570,575],{"name":13,"slug":14,"description":560,"post_count":34,"subcategories":561},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":152,"slug":104,"description":563,"post_count":34,"subcategories":564},"Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":566,"slug":567,"description":568,"post_count":132,"subcategories":569},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":571,"slug":572,"description":573,"post_count":132,"subcategories":574},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":576,"slug":577,"description":578,"post_count":132,"subcategories":579},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[]]