Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Text Shadow

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      text-shadow

      The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.

      Possible Values

      • <color>:
      • Sets the color of the shadow.
      • It is optional.
      • It can be specified either before or after the offset values.
      • Any value for color can be specified, such as, name, HEX or RGB value.
      • <offset-x><offset-y>:
      • Any length value, specifying the x and y values.
      • x value represents the shadow's horizontal distance from text.
      • y value represents the shadow's vertical distance from text.
      • If x and y values equal 0, the shadow appears behind the text.
      • <blur-radius>
      • Any length value, specifying the value of blur-radius.
      • It is optional.
      • To make the blur look bigger, you need to provide higher value.
      • If no value is passed, it is taken as 0.

      Applies to

      All the HTML elements.

      DOM Syntax

      object.style.textShadow = "5px 5px 3px red";
      • The first two (5px,5px) values specify the length of the shadow offset i.e the X-coordinate and the Y-coordinate.
      • The third value (3px) specifies the blur radius.
      • The last value (red) describes the color of the shadow.

      CSS text-shadow - Simple Shadow Effects

      Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers 
      <html>
      <head>
      </head>
      <body>
         <h2>Text Shadow</h2>
            <p style="text-shadow: 5px 5px 3px yellow;">Text shadow</p>
            <p style="text-shadow: 10px 5px #00ffff;">Text shadow</p>
            <p style="text-shadow: blue 0px 0px 2px">Text shadow</p>
            <p style="text-shadow: rgb(26, 69, 105) 0px 0px 10px">Text shadow</p>
      </body>
      </html>